android-apps-mirrors/SimpleX-Chat
0
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2025-06-28 20:29:53 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

new website (#1307)

Browse source 
* 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 2022-11-08 11:04:02 +00:00 • committed by GitHub
parent dd9e94eefd
commit fa5a70cd19
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
468 changed files with 5466 additions and 1323 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.github/workflows/web.yml vendored
View file

@ -5,6 +5,7 @@ on:
branches:
- master
- stable
- website
paths:
- website/**
- images/**

1
blog/20201022-simplex-chat.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "Simplex Chat"
date: 2020-10-22
preview: The prototype of SimpleX Messaging Server implementing SMP protocol.
permalink: "/blog/20201022-simplex-chat.html"
---

1
blog/20210512-simplex-chat-terminal-ui.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "Announcing SimpleX Chat Prototype!"
date: 2021-05-12
preview: Prototype chat app for the terminal (console).
permalink: "/blog/20210512-simplex-chat-terminal-ui.html"
---

1
blog/20210914-simplex-chat-v0.4-released.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat v0.4"
date: 2021-09-14
preview: Terminal app now supports groups and file transfers.
permalink: "/blog/20210914-simplex-chat-v0.4-released.html"
---

1
blog/20211208-simplex-chat-v0.5-released.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat v0.5"
date: 2021-12-08
preview: Support for long-term user addresses in terminal app.
permalink: "/blog/20211208-simplex-chat-v0.5-released.html"
---

1
blog/20220112-simplex-chat-v1-released.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat v1"
date: 2022-01-12
preview: Major protocol changes address all design mistakes identified during concept review by an independent expert.
permalink: "/blog/20220112-simplex-chat-v1-released.html"
---

1
blog/20220214-simplex-chat-ios-public-beta.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat public beta for iOS"
date: 2022-02-14
preview: Our first prototype of mobile UI for iOS is available!
permalink: "/blog/20220214-simplex-chat-ios-public-beta.html"
---

1
blog/20220308-simplex-chat-mobile-apps.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat mobile apps for iOS and Android"
date: 2022-03-08
preview: Brand new mobile apps with battle-tested Haskell core.
permalink: "/blog/20220308-simplex-chat-mobile-apps.html"
---

1
blog/20220404-simplex-chat-instant-notifications.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "Instant notifications for SimpleX Chat mobile apps"
date: 2022-04-04
preview: Design of private instant notifications on Android and for push notifications for iOS.
permalink: "/blog/20220404-simplex-chat-instant-notifications.html"
---

2
blog/20220511-simplex-chat-v2-images-files.md
View file

@ -2,6 +2,8 @@
layout: layouts/article.html
title: "SimpleX Chat v2.0 - sending images and files in mobile apps"
date: 2022-05-11
image: ./images/20220511-images-files.png
preview: Read how SimpleX delivers messages without having user profile identifiers of any kind.
permalink: "/blog/20220511-simplex-chat-v2-images-files.html"
---

1
blog/20220524-simplex-chat-better-privacy.md
View file

@ -2,6 +2,7 @@
layout: layouts/article.html
title: "SimpleX Chat v2.1 - better conversation privacy"
date: 2022-05-24
preview: Clear conversations without deleting contacts
permalink: "/blog/20220524-simplex-chat-better-privacy.html"
---

7
blog/20220604-simplex-chat-new-privacy-security-settings.md
View file

@ -1,11 +1,14 @@
---
layout: layouts/article.html
title: "SimpleX Chat v2.2 - the first messaging platform without user identities - 100% private by design!"
title: "SimpleX Chat v2.2 - the new privacy and security features"
date: 2022-06-04
image: ./images/20220604-privacy-settings.png
imageBottom: true
previewBody: blog_previews/20220604.html
permalink: "/blog/20220604-simplex-chat-new-privacy-security-settings.html"
---
# SimpleX Chat v2.2 - the first messaging platform without user identities - 100% private by design!
# SimpleX Chat v2.2 - the new privacy and security features
**Published:** June 4, 2022

6
blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.md
View file

@ -1,11 +1,13 @@
---
layout: layouts/article.html
title: "SimpleX announces SimpleX Chat v3"
title: "SimpleX announces SimpleX Chat v3 &mdash; with encrypted calls and iOS push notifications"
date: 2022-07-11
image: ./images/20220711-call.png
previewBody: blog_previews/20220711.html
permalink: "/blog/20220711-simplex-chat-v3-released-ios-notifications-audio-video-calls-database-export-import-protocol-improvements.html"
---
# SimpleX announces SimpleX Chat v3
# SimpleX announces SimpleX Chat v3 - with encrypted calls and iOS push notifications
**Published:** Jul 11, 2022

9
blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.md
View file

@ -1,11 +1,14 @@
---
layout: layouts/article.html
title: "SimpleX Chat v3.1-beta is released"
title: "SimpleX Chat v3.1-beta is released &mdash; improved battery/traffic usage"
date: 2022-07-23
image: ./images/20220723-group-invite.png
imageBottom: true
previewBody: blog_previews/20220723.html
permalink: "/blog/20220723-simplex-chat-v3.1-tor-groups-efficiency.html"
---
# SimpleX Chat v3.1-beta is released
# SimpleX Chat v3.1-beta is released - improved battery/traffic usage
**Published:** Jul 23, 2022
@ -38,7 +41,7 @@ curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/stable/inst
Groups have been supported by SimpleX Chat core for a very long time, but there was no user interface in the mobile apps to use them - users had to use chat console to create groups, add members, and accept invitations.
This release allows accepting the invitations to join groups via mobile apps UI, making it much easier to create groups - only one user (a group owner) needs to use chat console, while all other groups members just need to tap a button in the UI to join or leave the group. Full group UI is coming in v3.1 in 1-2 weeks, but you can already start using groups today by installing beta-versions of mobile apps via [TestFlight](https://testflight.apple.com/join/DWuT2LQu), [Google PlayStore Beta](https://play.google.com/apps/testing/chat.simplex.app) and [APK download](https://github.com/simplex-chat/simplex-chat/releases/download/v3.1.0-beta.0/simplex.apk).
This release allows accepting the invitations to join groups via mobile apps UI, making it much easier to create groups - only one user (a group owner) needs to use chat console, while all other groups members just need to tap a button in the UI to join or leave the group. Full group UI is coming in v3.1 in 1-2 weeks, but you can already start using groups today by installing beta-versions of mobile apps via [TestFlight](https://testflight.apple.com/join/DWuT2LQu), [Google PlayStore Beta](https://play.google.com/apps/testing/chat.simplex.app) and [APK download](https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk).
To manage groups via terminal app or via chat console in the mobile apps you have to use these commands:

7
blog/20220808-simplex-chat-v3.1-chat-groups.md
View file

@ -1,11 +1,14 @@
---
layout: layouts/article.html
title: "SimpleX Chat v3.1 is released"
title: "SimpleX Chat v3.1 is released &mdash; with secret groups and server access via Tor"
date: 2022-08-08
image: ./images/20220808-tor1.png
imageBottom: true
previewBody: blog_previews/20220808.html
permalink: "/blog/20220808-simplex-chat-v3.1-chat-groups.html"
---
# SimpleX Chat v3.1 is released
# SimpleX Chat v3.1 is released - with secret groups and server access via Tor
**Published:** Aug 8, 2022

7
blog/20220901-simplex-chat-v3.2-incognito-mode.md
View file

@ -1,11 +1,14 @@
---
layout: layouts/article.html
title: "SimpleX Chat v3.2 is released"
title: "SimpleX Chat v3.2 is released &mdash; meet Incognito mode, unique to Simplex Chat"
date: 2022-09-01
image: ./images/20220901-incognito1.png
imageBottom: true
previewBody: blog_previews/20220901.html
permalink: "/blog/20220901-simplex-chat-v3.2-incognito-mode.html"
---
# SimpleX Chat v3.2 is released
# SimpleX Chat v3.2 is released - meet Incognito mode, unique to Simplex Chat
**Published:** Sep 1, 2022

3
blog/20220928-simplex-chat-v4-encrypted-database.md
View file

@ -2,6 +2,9 @@
layout: layouts/article.html
title: "SimpleX Chat v4.0 with encrypted database is released"
date: 2022-09-28
image: ./images/20220928-passphrase.png
imageBottom: true
previewBody: blog_previews/20220928.html
permalink: "/blog/20220928-simplex-chat-v4-encrypted-database.html"
---

BIN
blog/images/20220511-images-files.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
blog/images/20220711-call.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 390 KiB

2
website/.eleventy.js
View file

@ -7,7 +7,9 @@ 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/video")
ty.addPassthroughCopy("src/css")
ty.addPassthroughCopy("src/js")
ty.addPassthroughCopy("src/contact/*.js")

2
website/package.json
View file

@ -7,7 +7,7 @@
"build": "npm run build:js && npm run build:eleventy && npm run build:tailwind",
"start": "npx eleventy --serve",
"test": "echo \"Error: no test specified\" && exit 1",
"build:js": "cp ./node_modules/qrcode/build/qrcode.js ./src/contact/ && ./copy_call.sh",
"build:js": "cp ./node_modules/qrcode/build/qrcode.js ./src/js/ && ./copy_call.sh",
"build:eleventy": "eleventy",
"build:tailwind": "npx tailwindcss -i ./tailwind.css -o ./_site/css/tailwind.css",
"watch:tailwind": "npx tailwindcss -i ./tailwind.css -o ./_site/css/tailwind.css --watch"

2
website/src/CNAME
View file

@ -1 +1 @@
simplex.chat
new.simplex.chat

52
website/src/_data/features.json Normal file
View file

@ -0,0 +1,52 @@
{
"sections": [
{
"id": 1,
"title": "E2E-encrypted messages with markdown and editing",
"imgLight": "/img/new/feature-1.svg",
"imgDark": "/img/new/feature-1-dark.svg"
},
{
"id": 2,
"title": "E2E-encrypted<br>images and files",
"imgLight": "/img/new/feature-2.svg",
"imgDark": "/img/new/feature-2-dark.svg"
},
{
"id": 3,
"title": "Decentralized secret groups &mdash;<br>only users know they exist",
"imgLight": "/img/new/feature-3.svg",
"imgDark": "/img/new/feature-3-dark.svg"
},
{
"id": 4,
"title": "E2E-encrypted voice messages <em>(coming soon)</em>",
"imgLight": "/img/new/feature-4.svg",
"imgDark": "/img/new/feature-4-dark.svg"
},
{
"id": 5,
"title": "Disappearing secret conversations <em>(coming soon)</em>",
"imgLight": "/img/new/feature-5.svg",
"imgDark": "/img/new/feature-5-dark.svg"
},
{
"id": 6,
"title": "E2E-encrypted<br>audio and video calls",
"imgLight": "/img/new/feature-6.svg",
"imgDark": "/img/new/feature-6-dark.svg"
},
{
"id": 7,
"title": "Portable encrypted database &mdash; move your profile to another device",
"imgLight": "/img/new/feature-7.svg",
"imgDark": "/img/new/feature-7-dark.svg"
},
{
"id": 8,
"title": "Incognito mode &mdash;<br>unique to SimpleX Chat",
"imgLight": "/img/new/feature-8.svg",
"imgDark": "/img/new/feature-8-dark.svg"
}
]
}

26
website/src/_data/hero_overlays.json Normal file
View file

@ -0,0 +1,26 @@
{
"sections": [
{
"id": 1,
"imgLight": "/img/new/explained-2.svg",
"imgDark": "/img/new/explained-2.svg",
"overlayContent": {
"overlayId": "hero-overlay-1",
"title": "How does SimpleX work?",
"showImage": true,
"contentBody": "overlay_content/hero/card_1.html"
}
},
{
"id": 2,
"imgLight": "/img/new/explained-1.svg",
"imgDark": "/img/new/explained-1.svg",
"overlayContent": {
"overlayId": "hero-overlay-2",
"title": "Why user IDs are bad for privacy?",
"showImage": true,
"contentBody": "overlay_content/hero/card_2.html"
}
}
]
}

15
website/src/_data/simplex_network_overlay.json Normal file
View file

@ -0,0 +1,15 @@
{
"sections": [
{
"id": 1,
"imgLight": "/img/new/network-1.svg",
"imgDark": "/img/new/network-1-dark.svg",
"overlayContent": {
"overlayId": "simplex-network-overlay-1",
"title": "Comparison with P2P messaging protocols",
"showImage": true,
"contentBody": "overlay_content/simplex_network/card_1.html"
}
}
]
}

103
website/src/_data/what_makes_simplex_private.json Normal file
View file

@ -0,0 +1,103 @@
{
"sections": [
{
"id": 10,
"title": "Temporary anonymous pairwise identifiers",
"imgLight": "/img/new/private-10.svg",
"imgDark": "/img/new/private-10-dark.svg",
"points": [
"SimpleX uses temporary anonymous pairwise addresses and credentials for each user contact or group member.",
"It allows to deliver messages without user profile identifiers, providing better meta-data privacy than alternatives."
]
},
{
"id": 6,
"title": "Out-of-band<br>key exchange",
"imgLight": "/img/new/private-6.svg",
"imgDark": "/img/new/private-6-dark.svg",
"points": [
"Many communication platforms are vulnerable to MITM attacks by servers or network providers.",
"To prevent it SimpleX apps pass one-time keys out-of-band, when you share an address as a link or a QR code."
]
},
{
"id": 1,
"title": "2-layers of<br>end-to-end encryption",
"imgLight": "/img/new/private-1.svg",
"imgDark": "/img/new/private-1-dark.svg",
"points": [
"Double-ratchet protocol &mdash;<br>OTR messaging with perfect forward secrecy and break-in recovery.",
"NaCL cryptobox in each queue to prevent traffic correlation between message queues if TLS is compromised."
]
},
{
"id": 7,
"title": "Message integrity<br>verification",
"imgLight": "/img/new/private-7.svg",
"imgDark": "/img/new/private-7-dark.svg",
"points": [
"To guarantee integrity the messages are sequentially numbered and include the hash of the previous message.",
"If any message is added, removed or changed the recipient will be alerted."
]
},
{
"id": 2,
"title": "Additional layer of<br>server encryption",
"imgLight": "/img/new/private-2.svg",
"imgDark": "/img/new/private-2-dark.svg",
"points": [
"Additional layer of server encryption for delivery to the recipient, to prevent the correlation between received and sent server traffic if TLS is compromised."
]
},
{
"id": 8,
"title": "Message mixing<br>to reduce correlation",
"imgLight": "/img/new/private-8.svg",
"imgDark": "/img/new/private-8-dark.svg",
"points": [
"SimpleX servers act as low latency mix nodes &mdash; the incoming and outgoing messages have different order."
]
},
{
"id": 3,
"title": "Secure authenticated<br>TLS transport",
"imgLight": "/img/new/private-3.svg",
"imgDark": "/img/new/private-3-dark.svg",
"points": [
"Only TLS 1.2/1.3 with strong algorithms is used for client-server connections.",
"Server fingerprint and channel binding prevent MITM and replay attacks.",
"Connection resumption is disabled to prevent session attacks."
]
},
{
"id": 4,
"title": "Optional<br>access via Tor",
"imgLight": "/img/new/private-4.svg",
"imgDark": "/img/new/private-4-dark.svg",
"points": [
"To protect your IP address you can access the servers via Tor or some other transport overlay network.",
"To use SimpleX via Tor please install <a href=\"https://guardianproject.info/apps/org.torproject.android/\" target=\"_blank\">Orbot app</a> and enable SOCKS5 proxy (or VPN <a href=\"https://apps.apple.com/us/app/orbot/id1609461599?platform=iphone\" target=\"_blank\">on iOS</a>)."
]
},
{
"id": 9,
"title": "Unidirectional<br>message queues",
"imgLight": "/img/new/private-9.svg",
"imgDark": "/img/new/private-9-dark.svg",
"points": [
"Each message queue passes messages in one direction, with the different send and receive addresses.",
"It reduces the attack vectors, compared with traditional message brokers, and available meta-data."
]
},
{
"id": 5,
"title": "Multiple layers of<br>content padding",
"imgLight": "/img/new/private-5.svg",
"imgDark": "/img/new/private-5-dark.svg",
"points": [
"SimpleX uses content padding for each encryption layer to frustrate message size attacks.",
"It makes messages of different sizes look the same to the servers and network observers."
]
}
]
}

43
website/src/_data/why_privacy_matters.json Normal file
View file

@ -0,0 +1,43 @@
{
"sections": [
{
"id": 1,
"title": "Advertising and price discrimination",
"imgLight": "/img/new/privacy-section-1.svg",
"imgDark": "/img/new/privacy-section-1.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-1",
"title": "Privacy saves you money",
"linkText": "Privacy saves you money",
"showImage": false,
"contentBody": "overlay_content/why_privacy_matters/card_1.html"
}
},
{
"id": 2,
"title": "Manipulation of elections",
"imgLight": "/img/new/privacy-section-2.svg",
"imgDark": "/img/new/privacy-section-2.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-2",
"title": "Privacy gives you power",
"linkText": "Privacy gives you power",
"showImage": false,
"contentBody": "overlay_content/why_privacy_matters/card_2.html"
}
},
{
"id": 3,
"title": "Prosecution due to innocent association",
"imgLight": "/img/new/privacy-section-3.svg",
"imgDark": "/img/new/privacy-section-3.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-3",
"title": "Privacy protects your freedom",
"linkText": "Privacy protects your freedom",
"showImage": false,
"contentBody": "overlay_content/why_privacy_matters/card_3.html"
}
}
]
}

60
website/src/_data/why_simplex_is_unique.json Normal file
View file

@ -0,0 +1,60 @@
{
"sections": [
{
"id": 1,
"title": "You have complete privacy",
"descBody": "sections/simplex_unique/card_1.html",
"imgLight": "/img/new/unique-section-1.png",
"imgDark": "/img/new/unique-section-1-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-1",
"title": "Full privacy of your identity, profile, contacts and metadata",
"linkText": "Learn more",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_1.html"
}
},
{
"id": 2,
"title": "You are protected<br>from spam and abuse",
"descBody": "sections/simplex_unique/card_2.html",
"imgLight": "/img/new/unique-section-2.png",
"imgDark": "/img/new/unique-section-2-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-2",
"title": "The best protection from spam and abuse",
"linkText": "Learn more",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_2.html"
}
},
{
"id": 3,
"title": "You control your data",
"descBody": "sections/simplex_unique/card_3.html",
"imgLight": "/img/new/unique-section-3.png",
"imgDark": "/img/new/unique-section-3-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-3",
"title": "Ownership, control and security of your data",
"linkText": "Learn more",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_3.html"
}
},
{
"id": 4,
"title": "You own SimpleX network",
"descBody": "sections/simplex_unique/card_4.html",
"imgLight": "/img/new/unique-section-4.png",
"imgDark": "/img/new/unique-section-4-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-4",
"title": "Fully decentralised &mdash; users own the SimpleX network",
"linkText": "Learn more",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_4.html"
}
}
]
}

7
website/src/_includes/blog_previews/20220604.html Normal file
View file

@ -0,0 +1,7 @@
<p>Added:</p>
<ul>
<li>protect your chats with SimpleX Lock</li>
<li>save data and avoid sharing you are online &mdash; manually accepting images</li>
<li>avoid visiting websites of the links you send &mdash; disable link previews</li>
<li>identify any lost messages in the chat</li>
</ul>

9
website/src/_includes/blog_previews/20220711.html Normal file
View file

@ -0,0 +1,9 @@
<p>Added:</p>
<ul>
<li>chat database export and import</li>
<li>end-to-end encrypted audio/video calls</li>
<li>protocol privacy and performance improvements</li>
</ul>
<p style="margin-top: 6px">
Also read why having users' identifiers that all other platforms use is bad for the users, and how they reduce privacy.
</p>

7
website/src/_includes/blog_previews/20220723.html Normal file
View file

@ -0,0 +1,7 @@
<p>Added:</p>
<ul>
<li>terminal app: access to messaging servers via SOCKS5 proxy (e.g., Tor).</li>
<li>mobile apps: join and leave chat groups.</li>
<li>optimized battery and traffic usage &mdash; up to 90x reduction!</li>
<li>two docker configurations for self-hosted SMP servers.</li>
</ul>

8
website/src/_includes/blog_previews/20220808.html Normal file
View file

@ -0,0 +1,8 @@
<p>Added:</p>
<ul>
<li>finally, secret chat groups &mdash; nobody but members know they exist!</li>
<li>access to messaging servers via Tor on all platforms</li>
<li>advanced network settings to optimize traffic usage</li>
<li>published chat protocol</li>
<li>new app icons</li>
</ul>

8
website/src/_includes/blog_previews/20220901.html Normal file
View file

@ -0,0 +1,8 @@
<p>Added:</p>
<ul>
<li>Incognito mode &mdash; use a new random profile name for each contact</li>
<li>use .onion server addresses with Tor</li>
<li>endless scrolling and search</li>
<li>choose accent color and dark mode</li>
<li>reduced APK size for direct download and in F-Droid repo from 200 to 46Mb!</li>
</ul>

10
website/src/_includes/blog_previews/20220928.html Normal file
View file

@ -0,0 +1,10 @@
<p>Added:</p>
<ul>
<li>encrypted local chat database &mdash; if you already use the app, you can encrypt the database in the app settings</li>
<li>support for self-hosted WebRTC ICE servers</li>
<li>improved stability of creating new connections: more reliable groups, files and contacts</li>
<li>deleting files and media &mdash; for security and to save storage</li>
<li>For developers &mdash; TypeScript SDK for integrating with SimpleX Chat</li>
<li>support animated images in Android app</li>
<li>German language in mobile apps UI</li>
</ul>

30
website/src/_includes/components/macro.njk Normal file
View file

@ -0,0 +1,30 @@
{% macro overlay(section) %}
{# Overlay is either hidder or flex #}
<div id="{{ section.overlayContent.overlayId }}" class="overlay hidden fixed top-0 left-0 bottom-0 right-0 before:absolute before:w-full before:h-full bg-transparent before:bg-secondary-bg-light dark:before:bg-primary-bg-dark before:opacity-90 items-center justify-center p-3 md:p-10 z-[10000]">
<div class="overlay-card w-full md:w-fit md:max-w-[1276px] bg-white dark:bg-card-bg-dark opacity-100 h-full md:h-fit md:max-h-[660px] z-[10001] rounded-md shadow-[0px_3px_12px_rgba(0,0,0,0.2)] p-6 py-10 sm:p-14 overflow-auto scale-100">
<h1 class="text-3xl font-bold text-active-blue mb-6">{{ section.overlayContent.title | safe }}</h1>
<div class="flex flex-col-reverse lg:flex-row gap-10 justify-between">
{% if section.overlayContent.contentBody %}
<div class="lg:max-w-[448px]">
<div class="text-grey-black dark:text-white flex flex-col gap-6 text-base">
{% include section.overlayContent.contentBody %}
</div>
</div>
{% endif %}
{% if section.overlayContent.showImage %}
<div class="max-w-[448px]">
<div class="flex items-center justify-center">
<img class="w-full max-w-[448px] min-w-[300px] dark:hidden" src="{{ section.imgLight }}" alt="">
<img class="w-full max-w-[448px] min-w-[300px] hidden dark:block" src="{{ section.imgDark }}" alt="">
</div>
</div>
{% endif %}
</div>
<svg class="fill-grey-black dark:fill-white fixed right-5 top-5 cursor-pointer close-overlay-btn" id="cross" width="16" height="16" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z"/>
</svg>
</div>
</div>
{% endmacro %}

166
website/src/_includes/contact_page.html Normal file
View file

@ -0,0 +1,166 @@
{% block js_scripts %}
<script src="/js/qrcode.js"></script>
<script async defer src="/js/contact.js"></script>
{% endblock %}
<section class="hidden xl:block h-screen pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="container m-auto h-full flex items-center justify-between px-5">
<div class="flex flex-col items-start justify-center w-full h-full">
<p class="text-[38px] leading-[43px] font-bold max-w-[500px] mb-[30px] primary-header-contact">{{ header }}</p>
<p class="text-[20px] leading-[28px] text-[#606C71] dark:text-white font-bold max-w-[475px] mb-[80px] secondary-header-contact">Scan the QR code with the SimpleX Chat app on your phone or tablet.</p>
<p class="text-grey-black dark:text-white text-base mb-[16px]">
The public keys and message queue address in this link are NOT sent over the network when you view this page &mdash;
they are contained in the hash fragment of the link URL.
</p>
<p class="text-grey-black dark:text-white text-base">Not downloaded the SimpleX Chat yet?</p>
<p class="text-grey-black dark:text-white text-base mb-[24px]">Use the links below to download the app.</p>
<div class="flex items-center justify-center gap-4 flex-wrap">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
</div>
</div>
<div class="h-full pt-[30px] w-[630px] relative">
<div class="relative h-full w-[inherit] flex items-center justify-center">
<div class="absolute mt-[-100px]">
<img class="" src="/img/new/contact_page_mobile.png" alt="">
</div>
<div class="z-10 flex flex-col items-center pt-[40px] ml-[-15px]">
<p class="text-base font-medium">Scan QR code from mobile app</p>
<canvas class="conn_req_uri_qrcode"></canvas>
</div>
</div>
</div>
</div>
</section>
<section class="block xl:hidden pt-[106px] pb-[90px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="container m-auto h-full px-5">
<div class="flex flex-col items-center">
<p class="text-[28px] font-bold text-center max-w-[602px] mb-[40px] primary-header-contact">{{ header }}</p>
<p class="text-[20px] leading-[28px] text-grey-black dark:text-white font-medium mb-[30px]">To make a connection:</p>
<div class="flex flex-col justify-center items-center p-4 w-full max-w-[468px] min-h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">Install SimpleX app</p>
<div class="flex flex-wrap items-center justify-center gap-2">
<a class="apple-store-btn hidden" href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a class="google-play-btn hidden" href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
<a class="f-droid-btn hidden" href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
</div>
<div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
<p class="text-base text-white font-bold leading-[36px]">1</p>
</div>
</div>
<div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 mb-6 relative">
<p class="text-xl font-medium text-grey-black dark:text-white mb-4">Connect in app</p>
<a id="mobile_conn_req_uri" class="bg-[#0053D0] text-white py-3 px-8 rounded-[34px] h-[44px] text-[16px] leading-[19px] tracking-[0.02em]">Open Simplex app</a>
<div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
<p class="text-base text-white font-bold leading-[36px]">2</p>
</div>
</div>
<div class="flex flex-col justify-center items-center w-full max-w-[468px] h-[131px] rounded-[30px] border-[1px] border-[#A8B0B4] dark:border-white border-opacity-60 relative">
<p class="text-xl font-medium text-grey-black dark:text-white max-w-[230px] text-center">Tap the <span class="text-active-blue">‘connect’</span> button in the app</p>
<div class="absolute bg-[#0197FF] h-[44px] w-[44px] rounded-full flex items-center justify-center top-0 left-0 translate-x-[-30%] translate-y-[-30%]">
<p class="text-base text-white font-bold leading-[36px]">3</p>
</div>
</div>
</div>
</div>
</section>
<section class="hidden md:block bg-secondary-bg-light dark:bg-secondary-bg-dark py-[20px]">
<div class="container px-5">
<div class="text-grey-black dark:text-white">
{# For Tablet #}
<div class="hidden md:block xl:hidden for-tablet">
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">Scan the QR code with the SimpleX Chat app</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
</div>
<div class="contact-tab-content flex flex-col gap-10">
<p class="text-base mb-5">
The public keys and message queue address in this link are NOT sent over the network when you view this page &mdash;<br>
they are contained in the hash fragment of the link URL.
</p>
<canvas class="self-center conn_req_uri_qrcode"></canvas>
</div>
</div>
</div>
{# For Desktop #}
<div class="hidden xl:block">
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">Installing SimpleX chat to terminal</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
</div>
<div class="contact-tab-content">
<p class="text-base mb-4">Use this command:</p>
<p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-8">
<span class="text-grey-black font-light text-[14px] leading-6">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh | bash</span>
<!-- <img class="content_copy" src="/img/new/content-copy.svg" /> -->
</p>
<p class="flex text-base font-medium mb-[76px]">See SimpleX Chat &nbsp;
<a href="" class="flex gap-1 no-underline">
<span class="text-primary-light dark:text-primary-dark underline underline-offset-4 text-base font-medium">GitHub repository</span>
<svg class="fill-primary-light dark:fill-primary-dark" width="24" height="24" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.2907 0.926758C9.24635 0.926758 0.290527 10.1075 0.290527 21.4331C0.290527 30.4933 6.02118 38.18 13.9679 40.8915C14.9674 41.0813 15.3344 40.4467 15.3344 39.905C15.3344 39.4161 15.3158 37.8007 15.3072 36.0872C9.74314 37.3277 8.56906 33.6677 8.56906 33.6677C7.65927 31.2975 6.3484 30.6672 6.3484 30.6672C4.53379 29.3945 6.48519 29.4206 6.48519 29.4206C8.49355 29.5653 9.55105 31.5338 9.55105 31.5338C11.3349 34.6688 14.2298 33.7624 15.3711 33.2385C15.5506 31.9131 16.069 31.0085 16.6409 30.4964C12.1986 29.9779 7.52878 28.2195 7.52878 20.3621C7.52878 18.1232 8.31007 16.294 9.58947 14.8579C9.38181 14.3414 8.69723 12.2557 9.78322 9.43111C9.78322 9.43111 11.4627 8.87998 15.2847 11.5331C16.8801 11.0787 18.591 10.8509 20.2907 10.8431C21.9904 10.8509 23.7027 11.0787 25.301 11.5331C29.1183 8.87998 30.7955 9.43111 30.7955 9.43111C31.8842 12.2557 31.1992 14.3414 30.9916 14.8579C32.274 16.294 33.05 18.1232 33.05 20.3621C33.05 28.2382 28.3712 29.9724 23.9176
30.4801C24.635 31.1165 25.2742 32.3644 25.2742 34.2776C25.2742 37.0214 25.251 39.2296 25.251 39.905C25.251 40.4507 25.611 41.0902 26.6248 40.8888C34.5672 38.1742 40.2905 30.4903 40.2905 21.4331C40.2905 10.1075 31.336 0.926758 20.2907 0.926758Z" />
</svg>
</a>
&nbsp;
the instructions how to download or compile it from the source code.</p>
</div>
</div>
<hr class="block mb-7 dark:opacity-[0.2] w-full">
<div class="contact-tab">
<div class="flex items-center justify-between my-[40px] contact-tab-btn cursor-pointer">
<p class="text-xl font-bold">If you already installed SimpleX Chat for the terminal</p>
<svg class="fill-grey-black dark:fill-white" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
</div>
<div class="contact-tab-content">
<p class="text-base font-medium mb-[46px]">If you already installed&nbsp;
<a href="" class="text-base font-medium">SimpleX Chat for the terminal</a>&nbsp;
v1.0.0+, copy the command below and use it in the chat:
</p>
<p class="bg-white flex items-center justify-between rounded p-3 shadow-[inset_0px_2px_2px_rgba(0,0,0,0.15)] mb-[36px]">
<span id="conn_req_uri_text" class="text-grey-black font-light text-[14px] leading-6">/c https://simplex.chat/contact#/?v=1&smp=smp://u2dS9sG8nMNURyZwqASV4yROM28Er0luVTx5X1CsMrU=@smp4.simplex.im/KBCmxJ3-lEjpWLPPkI6OWPk-YJneU5uY%23MCowBQYDK2VuAyEAtixHJWDXvYWcoe-77vIfjvI6XWEuzUsapMS9nVHP_Go=</span>
<!-- <img class="content_copy" src="/img/new/content-copy.svg" /> -->
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{# join simplex #}
{% include "sections/join_simplex.html" %}

86
website/src/_includes/footer.html
View file

@ -1,21 +1,71 @@
<footer>
<section class="bg-[#D9E7ED] dark:bg-[#0E2B57] py-[50px]">
<div class="container">
<img alt="simplex logo" class="logo d-none-992" src="/img/simplex.svg" />
<p class="copyright">
&#169; 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span>
<a class="d-none-576" href="https://github.com/simplex-chat" target="_blank"><img
src="/img/icons/github.svg" /></a>
<a class="d-none-576" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
src="/img/icons/reddit.svg" /></a>
<a class="d-none-576" href="https://twitter.com/simplexchat" target="_blank"><img
src="/img/icons/twitter.svg" /></a>
<a class="d-none-576" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
src="/img/icons/linkedin.svg" /></a>
<a class="d-none-576" href="mailto:chat@simplex.chat" target="_blank"><img src="/img/icons/email.svg" /></a>
</p>
<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 class="flex flex-col lg:flex-row justify-between">
<div class="flex flex-col items-center lg:items-start">
<a href="/" class="h-full mb-14 dark:hidden"><img class="w-auto h-[32px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="h-full mb-14 hidden dark:inline-block"><img class="w-auto h-[32px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<div class="flex flex-col items-center lg:items-start lg:flex-row gap-[150px] lg:gap-[350px]">
<div class="flex flex-col items-center lg:items-start">
<a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
SimpleX Whitepaper</a>
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
SimpleX Chat protocol</a>
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/PRIVACY.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Terms & Privacy Policy</a>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Donate</a>
</div>
<div class="flex flex-col items-center lg:items-start">
<a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
Terminal CLI</a>
<a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank"
class="text-grey-black dark:text-white text-[14px] font-medium leading-[28px] tracking-[0.01em] mb-3">
TypeScript SDK</a>
</div>
</div>
</div>
<article class="mt-10 lg:mt-0">
<div class="h-[40px] flex gap-4 justify-center">
<a href="https://github.com/simplex-chat" target="_blank">
<svg class="fill-primary-light dark:fill-primary-dark" width="40" height="40" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.2907 0.926758C9.24635 0.926758 0.290527 10.1075 0.290527 21.4331C0.290527 30.4933 6.02118 38.18 13.9679 40.8915C14.9674 41.0813 15.3344 40.4467 15.3344 39.905C15.3344 39.4161 15.3158 37.8007 15.3072 36.0872C9.74314 37.3277 8.56906 33.6677 8.56906 33.6677C7.65927 31.2975 6.3484 30.6672 6.3484 30.6672C4.53379 29.3945 6.48519 29.4206 6.48519 29.4206C8.49355 29.5653 9.55105 31.5338 9.55105 31.5338C11.3349 34.6688 14.2298 33.7624 15.3711 33.2385C15.5506 31.9131 16.069 31.0085 16.6409 30.4964C12.1986 29.9779 7.52878 28.2195 7.52878 20.3621C7.52878 18.1232 8.31007 16.294 9.58947 14.8579C9.38181 14.3414 8.69723 12.2557 9.78322 9.43111C9.78322 9.43111 11.4627 8.87998 15.2847 11.5331C16.8801 11.0787 18.591 10.8509 20.2907 10.8431C21.9904 10.8509 23.7027 11.0787 25.301 11.5331C29.1183 8.87998 30.7955 9.43111 30.7955 9.43111C31.8842 12.2557 31.1992 14.3414 30.9916 14.8579C32.274 16.294 33.05 18.1232 33.05 20.3621C33.05 28.2382 28.3712 29.9724 23.9176
30.4801C24.635 31.1165 25.2742 32.3644 25.2742 34.2776C25.2742 37.0214 25.251 39.2296 25.251 39.905C25.251 40.4507 25.611 41.0902 26.6248 40.8888C34.5672 38.1742 40.2905 30.4903 40.2905 21.4331C40.2905 10.1075 31.336 0.926758 20.2907 0.926758Z" />
</svg>
</a>
<a href="https://www.reddit.com/r/SimpleXChat/" target="_blank">
<svg class="fill-primary-light dark:fill-primary-dark" width="40" height="40" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.874 40.9268C31.9197 40.9268 40.874 31.9724 40.874 20.9268C40.874 9.88108 31.9197 0.926758 20.874 0.926758C9.82834 0.926758 0.874023 9.88108 0.874023 20.9268C0.874023 31.9724 9.82834 40.9268 20.874 40.9268ZM30.4091 16.615C31.9031 16.615 33.1157 17.8276 33.1157 19.3216C33.1157 20.426 32.4445 21.3787 31.5567 21.8118C31.6 22.0716 31.6217 22.3315 31.6217 22.613C31.6217 26.7705 26.7929 30.1268 20.8165 30.1268C14.8402 30.1268 10.0114 26.7705 10.0114 22.613C10.0114 22.3315 10.0331 22.05 10.0764 21.7902C9.12362 21.3571 8.47402 20.426 8.47402 19.3216C8.47402 17.8276 9.68662 16.615 11.1807 16.615C11.8953 16.615 12.5665 16.9181 13.0429 17.3728C14.9051 16.0086 17.4819 15.1642 20.3618 15.0776L21.726 8.6248C21.7693 8.49488 21.8343 8.3866 21.9425 8.32164C22.0508 8.25668 22.1807 8.23504 22.3106 8.25668L26.7929 9.20944C27.0961 8.55984 27.7457 8.12676 28.5035 8.12676C29.5646 8.12676 30.4307 8.99292 30.4307
10.0539C30.4307 11.115 29.5646 11.9811 28.5035 11.9811C27.4642 11.9811 26.6197 11.1582 26.5764 10.1406L22.5705 9.29604L21.3362 15.0776C24.1512 15.1858 26.7063 16.052 28.5469 17.3728C29.0232 16.8964 29.6728 16.615 30.4091 16.615ZM16.5291 19.3216C15.4681 19.3216 14.602 20.1878 14.602 21.2488C14.602 22.3098 15.4681 23.176 16.5291 23.176C17.5902 23.176 18.4563 22.3098 18.4563 21.2488C18.4563 20.1878 17.5902 19.3216 16.5291 19.3216ZM20.7949 27.7449C21.5311 27.7449 24.0429 27.6582 25.3638 26.3374C25.5587 26.1425 25.5587 25.8394 25.4071 25.6228C25.2122 25.428 24.8874 25.428 24.6925 25.6228C23.848 26.4456 22.0941 26.7488 20.8165 26.7488C19.539 26.7488 17.7634 26.4456 16.9405 25.6228C16.7457 25.428 16.4209 25.428 16.226 25.6228C16.0311 25.8177 16.0311 26.1425 16.226 26.3374C17.5252 27.6366 20.0587 27.7449 20.7949 27.7449ZM23.0902 21.2488C23.0902 22.3098 23.9563 23.176 25.0173 23.176C26.0783 23.176 26.9445 22.3098 26.9445 21.2488C26.9445 20.1878 26.0783
19.3216 25.0173 19.3216C23.9563 19.3216 23.0902 20.1878 23.0902 21.2488Z" />
</svg>
</a>
<a href="https://twitter.com/simplexchat" target="_blank">
<svg class="fill-primary-light dark:fill-primary-dark" width="40" height="40" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.4575 40.9268C31.5032 40.9268 40.4575 31.9725 40.4575 20.9268C40.4575 9.88106 31.5032 0.926758 20.4575 0.926758C9.41182 0.926758 0.45752 9.88106 0.45752 20.9268C0.45752 31.9725 9.41182 40.9268 20.4575 40.9268ZM29.916 16.7766C29.916 23.1157 25.014 30.4265 16.0519 30.4265V30.423C13.4038 30.4265 10.8115 29.6795 8.58252 28.2719C8.96846 28.3174 9.35558 28.3397 9.74271 28.3409C11.9372 28.3432 14.0688 27.6182 15.7942 26.283C13.7101 26.2444 11.8802 24.9055 11.2425 22.9507C11.9716 23.0898 12.7245 23.0619 13.4418 22.869C11.1689 22.4165 9.53371 20.4504 9.53252 18.1671V18.1062C10.2106 18.478 10.9694 18.6835 11.7448 18.7057C9.60377 17.2981 8.94233 14.4948 10.2355 12.3026C12.7103 15.2992 16.3606 17.1207 20.2782 17.3147C19.8851 15.6487 20.4231 13.902 21.6878 12.7306C23.6507 10.9137 26.737 11.0073 28.5824 12.9387C29.6737 12.7271 30.7199 12.3327 31.677 11.7738C31.3125 12.8857 30.5513 13.828 29.5348 14.4277C30.5002
14.3155 31.4443 14.0609 32.3325 13.6728C31.6782 14.6362 30.8553 15.4781 29.9017 16.1562C29.916 16.362 29.916 16.5685 29.916 16.7766Z" />
</svg>
</a>
<a href="https://www.linkedin.com/company/simplex-chat/" target="_blank">
<svg class="fill-primary-light dark:fill-primary-dark" width="40" height="40" viewBox="0 0 41 41" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0408 0.926758C8.9951 0.926758 0.0407715 9.88109 0.0407715 20.9268C0.0407715 31.9724 8.9951 40.9268 20.0408 40.9268C31.0864 40.9268 40.0408 31.9724 40.0408 20.9268C40.0408 9.88109 31.0864 0.926758 20.0408 0.926758ZM9.6421 17.4916H14.1745V31.1098H9.6421V17.4916ZM14.4731 13.279C14.4437 11.9438 13.4889 10.9268 11.9383 10.9268C10.3878 10.9268 9.3741 11.9438 9.3741 13.279C9.3741 14.5866 10.3579 15.6328 11.8794 15.6328H11.9084C13.4889 15.6328 14.4731 14.5866 14.4731 13.279ZM25.3017 17.1718C28.2843 17.1718 30.5203 19.1187 30.5203 23.3015L30.5201 31.1098H25.9879V23.824C25.9879 21.994 25.3319 20.7453 23.6912 20.7453C22.439 20.7453 21.6932 21.5871 21.3656 22.4003C21.2458 22.6916 21.2164 23.0976 21.2164 23.5046V31.1101H16.6834C16.6834 31.1101 16.7431 18.7698 16.6834 17.492H21.2164V19.4208C21.8179 18.4936 22.8953 17.1718 25.3017 17.1718Z" />
</svg>
</a>
</div>
</article>
</div>
<a href="#" class="text-grey-black dark:text-white text-[16px] text-center lg:text-left font-medium leading-[28px] tracking-[0.01em] block mt-[60px]">© 2020-2022 SimpleX | Open-Source Project</a>
</div>
</footer>
</section>

106
website/src/_includes/hero.html Normal file
View file

@ -0,0 +1,106 @@
<div class="first-two-sections pt-[66px] bg-white dark:bg-gradient-radial-mobile dark:lg:bg-gradient-radial">
<div class="md:flex md:flex-col-reverse md:items-center xl:flex xl:flex-row xl:items-start relative xl:justify-between xl:gap-10 container">
<div class="">
<section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px] m-auto w-full flex items-center justify-between landing-page-header px-5">
<div class="xl:h-full flex flex-col items-center xl:items-start xl:justify-around w-full landing-page-header-div">
{# <img class="static-phone-tablet hidden md:block xl:hidden" src="/img/new/tab-hero.svg" alt="" /> #}
<img class="static-phone-mobile md:hidden" src="/img/new/mobile-hero.png" alt="" />
<article class="w-full xl:max-w-[600px] landing-page-header-article">
<p class="primary-header text-center xl:text-left font-bold text-[38px] md:text-[55px] leading-[46px] md:leading-[63px] mb-2 xl:mb-8">Privacy redefined</p>
<p class="secondary-header text-center xl:text-left font-bold text-[28px] md:text-[38px] leading-[36px] md:leading-[43px] mb-2 xl:mb-8 tracking-[0.01em]">The first messenger<br>without user IDs</p>
<p class="landing-page-header-article-paragraph text-black dark:text-white text-center xl:text-justify text-[16px] leading-[24px] mb-[20px] header-description">
Other apps have user IDs: Signal, Matrix, Session, Briar, Jami, Cwtch, etc.<br>
SimpleX does not, <strong>not even random numbers</strong>.<br>
This radically improves your privacy.
</p>
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[1].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">Why user IDs are bad for privacy?</a>
{{ overlay(hero_overlays.sections[1]) }}
<a href="javascript:void(0)" data-show-overlay="{{ hero_overlays.sections[0].overlayContent.overlayId }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-center xl:text-left text-[14px] xl:text-[16px] leading-[34px] underline-offset-2">How does SimpleX work?</a>
{{ overlay(hero_overlays.sections[0]) }}
</article>
<article class="w-full xl:max-w-[600px]">
<p class="text-black dark:text-white hidden md:block text-center xl:text-left text-[16px] leading-[26px] mb-[11px] md:mt-6">Get SimpleX</p>
<div class="socials flex items-center justify-center xl:justify-start gap-4 flex-wrap mt-[30px]">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
</div>
</article>
</div>
</section>
<section class="xl:h-[calc(100vh-66px)] xl:max-h-[888px]">
<div class="h-[calc(100%-81.42px)] w-full flex flex-col items-start justify-around">
<div class="hero-video-phone-container w-full xl:hidden">
<div class="hidden relative md:flex items-center justify-center">
<img id="hero-video-phone-Background hidden md:block" src="/img/new/tab-video.svg" />
<video class="absolute rounded-lg top-10 w-[235px] ml-[-6px] mt-1" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
{# <div class="absolute flex flex-col items-center gap-3">
<img src="/img/new/play-btn.svg" alt="" />
<p class="text-center text-[16px] leading-[24px] tracking-[0.04em] text-white">PLAY</p>
</div> #}
</div>
<div class="w-full md:hidden my-10 relative flex items-center justify-center bg-[#17203D]">
<video class="w-full" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
{# <img src="/img/new/mobile-video-placeholder.png" alt="">
<div class="absolute flex flex-col items-center gap-3">
<img src="/img/new/play-btn.svg" alt="" />
<p class="text-center text-[16px] leading-[24px] tracking-[0.04em] text-white">PLAY</p>
</div> #}
{# <video class="w-full absolute" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video> #}
</div>
{# <iframe id="hero-video-phone" src="https://www.youtube.com/embed/2IbRtjez6ag" title="Foodies Carpool Show ft WildLens By Abrar" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> #}
</div>
<article class="w-full xl:max-w-[600px] landing-page-header-article px-5">
<p class="text-active-blue text-center xl:text-left font-bold text-[28px] md:text-[35px] leading-[36px] md:leading-[43px] mb-[28px]">
Make a private connection
</p>
<p class="text-center text-black dark:text-white xl:text-justify leading-[24px] text-[16px] mb-10 xl:mb-[25px] header-description">
The video shows how you connect to your friend via their 1-time QR-code, in person or via a video link.
You can also connect by sharing an invitation link.
</p>
</article>
<div class="w-full container px-5 hidden md:flex items-center justify-center gap-[50px] py-[24px] xl:absolute bottom-0 z-10">
<a href="#why-simplex" class="menu-link">Why SimpleX</a>
<a href="#features" class="menu-link">Features</a>
<a href="#simplex-privacy" class="menu-link">SimpleX privacy</a>
<a href="#simplex-network" class="menu-link">SimpleX network</a>
</div>
</div>
</section>
</div>
<div class="hero-phone-background hidden md:flex md:static md:max-w-[490px] md:mb-6 xl:mb-0 xl:flex items-center justify-center h-fit xl:h-[calc(100vh-66px)] xl:max-h-[888px] xl:min-w-[600px] xl:sticky top-[66px]">
<img id="hero-phone-light" class="only-light"/>
<img id="hero-phone-dark" class="only-dark"/>
<div id="hero-phone-preload" style="display: none"></div>
<video id="hero-phone-video" class="absolute hidden rounded-[12px] bg-black w-[238px] mr-[-4px] mt-[14px]" controls>
<source src="/video/connect.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<script>
var navBar = document.querySelector("nav");
var landingPageHeader = document.querySelector('.landing-page-header');
//landingPageHeader.style.height = window.innerHeight - navBar.offsetHeight + 'px';
// event listener for changing height of section according to window height
//window.addEventListener('resize', function () {
// landingPageHeader.style.height = window.innerHeight - navBar.offsetHeight + 'px';
//});
</script>

51
website/src/_includes/layouts/article.html
View file

@ -1,24 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<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>{{ title }}</title>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blogs.css" />
<link rel="stylesheet" href="/css/blog.css" />
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<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 blog: {{ title }}</title>
<meta name="Content-Type" content="text/html;charset=utf-8" />
<meta property="og:type" content="article" />
<meta property="og:title" content="{{ title }}" />
<meta property="og:url" content="{{ permalink }}" />
{% if image %}
<meta property="og:image" content="./images/20220511-images-files.png" />
{% else %}
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png" />
{% endif %}
<meta name="twitter:card" content="summary" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/blog.css" />
<link href="/css/style.css" rel="stylesheet" />
</head>
<body class="sm:bg-gray-100">
{% include "nav.html" %}
<section class="container">
<div class="bg-white py-6 sm:py-12 sm:px-8 md:px-16 lg:px-20">{{ content | safe }}</div>
</section>
{% include "footer.html" %}
</body>
<body class="bg-[#F3F6F7] dark:bg-[#0C0B13]">
{% include "navbar.html" %}
<div class="container px-5">
<a class="inline-block text-grey-black dark:text-white my-5 underline underline-offset-2" href="/blog"><&nbsp;Back to list</a>
</div>
<section id="article" class="container mb-[75px] bg-white dark:bg-[#17203D] px-5">
<div class="py-6 md:p-[60px]">{{ content | safe }}</div>
</section>
{% include "footer.html" %}
</body>
</html>

37
website/src/_includes/layouts/main.html Normal file
View file

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<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>{{ title }}</title>
<meta name="description" content="{{ description }}"/>
<meta name="Content-Type" content="text/html;charset=utf-8"/>
<meta property="og:type" content="website"/>
<meta property="og:title" content="{{ title }}"/>
<meta property="og:description" content="{{ description }}"/>
<meta property="og:image" content="https://simplex.chat/img/share_simplex.png"/>
<meta name="twitter:card" content="summary"/>
<meta property="og:url" content="{{ ogURL }}" />
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico"/>
<link rel="stylesheet" href="/css/swiper-bundle.min.css">
<link href="/css/tailwind.css" rel="stylesheet"/>
<link rel="stylesheet" href="/css/style.css">
{% block js_scripts %}{% endblock %}
</head>
<body class="bg-white dark:bg-[#0C0B13]">
<section class="w-full bg-transparent fixed top-0 z-50">
{% include "navbar.html" %}
</section>
{{ content | safe }}
{% include "footer.html" %}
<script src="/js/animation.js"></script>
<script src="/js/swiper-bundle.min.js"></script>
<script src="/js/script.js"></script>
</body>
</html>

140
website/src/_includes/nav.html
View file

@ -1,140 +0,0 @@
<header>
<nav class="container">
<div class="flex items-center gap-[16px] h-full">
<a href="/">
<img alt="simplex logo" class="logo" src="/img/simplex.svg" />
</a>
<div class="hidden lg:flex gap-[16px]">
<a class="tracking-[1px] rounded text-[1.4rem] font-medium white-paper-nav-btn"
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank">Whitepaper</a>
<a class="tracking-[1px] rounded text-[1.4rem] font-medium comparison-nav-btn"
href="/#comparison">Comparison</a>
<a class="tracking-[1px] rounded text-[1.4rem] font-medium blog-nav-btn" href="/blog">Blog</a>
</div>
</div>
<div class="flex gap-4">
<div class="nav__buttons">
<div class="github">
<a class="github-button" href="https://github.com/simplex-chat/simplex-chat" data-size="large"
data-show-count="true" aria-label="Star simplex-chat on GitHub">Star</a>
</div>
<div class="donate d-none-576">
<a href="https://opencollective.com/simplex-chat" target="_blank">
<span class="button">Donate</span></a>
</div>
</div>
<div class="toggle self-stretch">
<label class="toggle-btn"><span></span></i></label>
</div>
</div>
</nav>
<div class="w-full fixed top-[60px] z-[99] bg-[#fbd561] mobile-nav">
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 white-paper-nav-btn"
href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md">Whitepaper</a>
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 comparison-nav-btn"
href="/#comparison">Comparison</a>
<a class="flex-1 flex justify-center text-[1.2rem] tracking-[1px] font-medium text-base px-3 py-4 border-x-0 border-y-0 border-t-[1px] border-solid border-yellow-200 blog-nav-btn"
href="/blog">Blog</a>
</div>
</header>
<script>
const toggleBtn = document.querySelector(".toggle-btn")
toggleBtn.addEventListener("click", () => {
if (toggleBtn.classList.contains("active-toggle-btn")) {
console.log("unchecked")
document.querySelector(".mobile-nav").classList.remove("mobile-nav-active")
toggleBtn.classList.remove("active-toggle-btn")
} else {
console.log("checked")
document.querySelector(".mobile-nav").classList.add("mobile-nav-active")
toggleBtn.classList.add("active-toggle-btn")
}
})
</script>
<style>
header {
overflow: hidden;
}
/* ====== NAV TOGGLE BUTTON ====== */
.toggle {
display: none;
}
.toggle-btn {
height: 100%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.toggle-btn span {
width: 20px;
height: 2px;
background-color: #062d56;
position: relative;
}
.toggle-btn span::after,
.toggle-btn span::before {
content: "";
width: 100%;
height: 100%;
background-color: #062d56;
position: absolute;
left: 0;
}
span::before {
top: -8px;
}
span::after {
top: 8px;
}
/* ====== Styles Applied AFTER the CLICK of TOGGLE BUTTON ====== */
.active-toggle-btn span {
background-color: transparent;
}
.active-toggle-btn span::before {
top: 0;
transform: rotate(45deg);
background-color: #062d56;
}
.active-toggle-btn span::after {
top: 0;
transform: rotate(-45deg);
background-color: #062d56;
}
.mobile-nav {
display: none;
transform: translateX(-100%);
transition: transform 0.5s ease-out;
}
.mobile-nav-active {
display: block;
transform: translateX(0%);
transition: transform 0.5s cubic-bezier(0.02, 0.48, 0.59, 1.48);
}
@media (max-width: 1024px) {
.toggle {
display: inline-block;
}
}
</style>

182
website/src/_includes/navbar.html Normal file
View file

@ -0,0 +1,182 @@
<header class="">
<div class="flex items-center justify-end m-auto px-4 lg:px-7 h-[66px]">
<a href="/" class="h-full hidden dark:hidden lg:flex items-center mr-auto"><img class="w-auto h-[50px]" src="/img/new/logo-light.png" alt="logo" /></a>
<a href="/" class="h-full hidden dark:lg:flex items-center mr-auto"><img class="w-auto h-[50px]" src="/img/new/logo-dark.png" alt="logo" /></a>
<a href="/" class="dark:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-light.svg" alt="" srcset=""></a>
<a href="/" class="hidden dark:inline-block dark:lg:hidden lg:hidden mr-auto"><img class="h-[32px]" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""></a>
<nav class="bg-[#F0F1F2] dark:bg-gradient-radial-mobile dark:lg:bg-none lg:bg-transparent fixed top-[66px] left-0 right-0 bottom-0 lg:top-0 lg:relative" id="menu">
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-10 px-4 lg:px-7 h-full">
<ul class="flex flex-col lg:flex-row lg:items-center gap-3 py-4 lg:py-0 lg:gap-10">
<li class="nav-link relative {% if active_home %}active{% endif %}">
<a href="/" class="flex items-center justify-between gap-2 lg:py-5 ">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Home</span>
</a>
</li>
<hr class="dark:opacity-[0.1]" >
<li class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Developers</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/apps/simplex-bot-advanced/Main.hs"
target="_blank" class="py-[10px] lg:px-[20px]"
>Chat bot example</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript"
target="_blank" class="py-[10px] lg:px-[20px]"
>TypeScript SDK</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/CLI.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>Terminal CLI</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq"
target="_blank" class="py-[10px] lg:px-[20px]"
>SimpleXMQ</a></li>
</ul>
</li>
<hr class="dark:opacity-[0.1]" >
<li class="nav-link relative">
<a href="javascript:void(0);" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] text-black dark:text-white before:bg-black dark:before:bg-white">Reference</span>
<span href="" id="btn-mobile" class="flex items-center justify-center h-[36px] w-[36px] lg:h-auto lg:w-auto mt-1">
<svg class="fill-black dark:fill-white" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
<ul class="flex flex-col items-start gap-2 lg:h-fit lg:absolute lg:bg-white dark:lg:bg-black top-full lg:mt-[10px] lg:py-4 min-w-[180px] rounded-md lg:shadow-[0_0_3px_rgb(60_72_88_/_15%)] sub-menu">
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>Whitepaper</a></li>
<li><a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/simplex-messaging.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>SMP protocol</a></li>
<li><a href="https://github.com/simplex-chat/simplex-chat/blob/stable/docs/protocol/simplex-chat.md"
target="_blank" class="py-[10px] lg:px-[20px]"
>Chat protocol</a></li>
</ul>
</li>
<hr class="dark:opacity-[0.1]" >
<li class="nav-link relative {% if active_blog %}active{% endif %}">
<a href="/blog" class="flex items-center justify-between gap-2 lg:py-5">
<span class="text-[16px] leading-[26px] tracking-[0.01em] nav-link-text text-black dark:text-white before:bg-black dark:before:bg-white">Blog</span>
</a>
</li>
</ul>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations"
target="_blank" class="inline-block self-center text-white dark:text-black text-[16px] font-medium tracking-[0.02em] rounded-[34px] bg-primary-light dark:bg-primary-dark py-3 lg:py-2 px-20 lg:px-5 mb-16 lg:mb-0"
>Donate</a>
</div>
</nav>
<button href="#" class="flex items-center justify-center h-[36px] w-[36px] ml-10 theme-switch-btn">
<img src="/img/new/sun.svg" alt="" srcset="" class="sun">
<img src="/img/new/moon.svg" alt="" srcset="" class="moon">
</button>
<button href="" id="btn-mobile" class="flex lg:hidden items-center justify-center h-[36px] w-[36px] ml-10 nav-toggle-btn">
<img src="/img/new/hamburger.svg" id="hamburger" alt="" srcset="">
<svg class="fill-black dark:fill-white hidden" id="cross" width="13" height="13" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7973 11.5525L7.59762 6.49833L12.7947 1.44675C13.055 1.19371 13.0658 0.771991 12.8188 0.505331C12.5718 0.238674 12.1602 0.227644 11.8999 0.480681L6.65343 5.58028L1.09979 0.182228C0.839522 -0.070157 0.427909 -0.059127 0.18094 0.207531C-0.0660305 0.474191 -0.0552645 0.895911 0.205003 1.14894L5.70862 6.49833L0.20247 11.851C-0.0577975 12.104 -0.0685635 12.5257 0.178407 12.7924C0.306324 12.9306 0.477936 13 0.650181 13C0.811033 13 0.971873 12.9397 1.09726 12.817L6.65343 7.41639L11.9025 12.5186C12.0285 12.6406 12.1893 12.7015 12.3495 12.7015C12.5218 12.7015 12.6934 12.6321 12.8213 12.4939C13.0689 12.2273 13.0582 11.8062 12.7973 11.5525Z" />
</svg>
</button>
</div>
</header>
<SCript>
// switch theme
const sunIcon = document.querySelector('.sun');
const moonIcon = document.querySelector('.moon');
const userTheme = localStorage.getItem('theme');
const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
const iconToggle = () => {
sunIcon.classList.toggle('hidden');
moonIcon.classList.toggle('hidden');
}
const themeCheck = () => {
if(userTheme === 'dark' || (!userTheme && systemTheme)){
document.documentElement.classList.add('dark');
moonIcon.classList.add('hidden');
}
else{
sunIcon.classList.add('hidden');
}
}
const themeSwitch = () => {
if(document.documentElement.classList.contains('dark')){
document.documentElement.classList.remove('dark');
localStorage.setItem('theme','light');
iconToggle();
}
else{
document.documentElement.classList.add('dark');
localStorage.setItem('theme','dark');
iconToggle();
}
}
const nav = document.querySelector('header nav');
window.addEventListener('click',(e)=>{
if(e.target.closest('.nav-link')){
if(e.target.closest('.nav-link').classList.contains('active')){
e.target.closest('.nav-link').classList.remove('active');
}
else{
document.querySelectorAll('.nav-link').forEach(el => el.classList.remove('active'))
e.target.closest('.nav-link').classList.add('active');
}
}
else if(e.target.closest('.nav-toggle-btn')){
document.body.classList.toggle('lock-scroll');
if(nav.classList.contains('open')){
nav.classList.remove('open');
document.getElementById('hamburger').classList.remove('hidden');
document.getElementById('cross').classList.add('hidden');
}
else{
nav.classList.add('open');
document.getElementById('hamburger').classList.add('hidden');
document.getElementById('cross').classList.remove('hidden');
}
}
else if(e.target.closest('.theme-switch-btn')){
themeSwitch();
}
})
themeCheck();
const changeHeaderBg = ()=>{
const header = document.querySelector('header')
const scrollValue = window.scrollY
if(scrollValue > 5){
header.classList.add('bg-primary-bg-light');
header.classList.add('dark:bg-primary-bg-dark');
}
else{
header.classList.remove('bg-primary-bg-light');
header.classList.remove('dark:bg-primary-bg-dark');
}
}
window.addEventListener('scroll',changeHeaderBg);
</SCript>

23
website/src/_includes/overlay_content/hero/card_1.html Normal file
View file

@ -0,0 +1,23 @@
<p>
Many users asked: <em>if SimpleX has no user identifiers, how can it know where to deliver messages?</em>
</p>
<p>
To deliver mesages, instead of user IDs used by all other platforms,
SimpleX uses temporary anonymous pairwise identifiers of message queues,
separate for each of your connections &mdash; there are no long term identifiers.
</p>
<p>
You define which server(s) to use to receive the messages,
your contacts &mdash; the servers you use to send the messages to them.
Every conversation is likely to use two different servers.
</p>
<p>
This design prevents leaking any users&apos; metadata on the application level.
To further improve privacy and protect your IP address you can connect to messaging servers via Tor.
</p>
<p>
Only client devices store user profiles, contacts and groups; the messages are sent with 2-layer end-to-end encryption.
</p>
<p>
Read more in <a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md" target="_blank">SimpleX whitepaper</a>.
</p>

21
website/src/_includes/overlay_content/hero/card_2.html Normal file
View file

@ -0,0 +1,21 @@
<p>
When users have persistent identities,
even if this is just a random number, like a Session ID,
there is a risk that the provider or an attacker can observe
how the users are connected and how many messages they send.
</p>
<p>
They could then correlate this information with the existing
public social networks, and determine some real identities.
</p>
<p>
Even with the most private apps that use Tor v3 services,
if you talk to two different contacts via the same profile
they can prove that they are connected to the same person.
</p>
<p>
SimpleX protects against these attacks by not having any
user IDs in its design. And, if you use Incognito mode,
you will have a different display name for each contact,
avoiding any shared data between them.
</p>

53
website/src/_includes/overlay_content/simplex_network/card_1.html Normal file
View file

@ -0,0 +1,53 @@
<p>
<a href="https://en.wikipedia.org/wiki/Peer-to-peer">P2P</a>
messaging protocols and apps have various problems that make
them less reliable than SimpleX, more complex to and
analyse, and vulnerable to several types of attack.
</p>
<ol style="list-style: auto; padding-left: 1em;">
<li>
P2P networks rely on some variant of
<a href="https://en.wikipedia.org/wiki/Distributed_hash_table">DHT</a>
to route messages. DHT designs have to balance delivery guarantee and latency.
SimpleX has both better delivery guarantee and lower latency than P2P, because
the message can be redundantly passed via several servers in parallel,
using the servers chosen by the recipient.
In P2P networks the message is passed through <em>O(log N)</em> nodes
sequentially, using nodes chosen by the algorithm.
</li>
<li>
SimpleX design, unlike most P2P networks, has no global user identifiers
of any kind, even temporary, and only uses temporary pairwise identifiers,
providing better anonymity and metadata protection.
</li>
<li>
P2P does not solve
<a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">MITM attack</a>
problem, and most existing implementations do not use out-of-band messages
for the initial key exchange. SimpleX uses out-of-band messages or, in some
cases, pre-existing secure and trusted connections for the initial key exchange.
</li>
<li>
P2P implementations can be blocked by some Internet providers (like
<a href="https://en.wikipedia.org/wiki/BitTorrent">BitTorrent</a>).
SimpleX is transport agnostic - it can work over standard web protocols, e.g. WebSockets.
</li>
<li>
All known P2P networks may be vulnerable to
<a href="https://en.wikipedia.org/wiki/Sybil_attack">Sybil attack</a>,
because each node is discoverable, and the network operates as a whole.
Known measures to mitigate it require either a centralized component or expensive
<a href="https://en.wikipedia.org/wiki/Proof_of_work">proof of work</a>.
SimpleX network has no server discoverability, it is fragmented and operates
as multiple isolated sub-networks,
making network-wide attacks impossible.
</li>
<li>
P2P networks may be vulnerable to
<a href="https://www.usenix.org/conference/woot15/workshop-program/presentation/p2p-file-sharing-hell-exploiting-bittorrent">DRDoS attack</a>,
when the clients can rebroadcast and amplify traffic, resulting in network-wide
denial of service.
SimpleX clients only relay traffic from known connection
and cannot be used by an attacker to amplify the traffic in the whole network.
</li>
</ol>

19
website/src/_includes/overlay_content/why_privacy_matters/card_1.html Normal file
View file

@ -0,0 +1,19 @@
<p>
Many large companies use information about who you are connected with to estimate your income,
sell you the products you don't really need, and to determine the prices.
</p>
<p>
Online retailers know that people with lower incomes are more likely to make urgent purchases,
so they may charge higher prices or remove discounts.
</p>
<p>
Some financial and insurance companies use social graphs
to determine interest rates and premiums.
It often makes people with lower incomes pay more &mdash;
it is known as <a href="https://fairbydesign.com/povertypremium/" target="_blank">"poverty premium"</a>.
</p>
<p>
SimpleX platform protects the privacy of your connections better than any alternative,
fully preventing your social graph becoming available to any companies or organizations.
Even when people use servers provided by SimpleX Chat, we do not know the number of users or their connections.
</p>

15
website/src/_includes/overlay_content/why_privacy_matters/card_2.html Normal file
View file

@ -0,0 +1,15 @@
<p>
Not so long ago we observed the major elections being manipulated
by <a href="https://en.wikipedia.org/wiki/Facebook–Cambridge_Analytica_data_scandal" target="_blank">a reputable consulting company</a>
that used our social graphs to distort our view of the real world and manipulate our votes.
</p>
<p>
To be objective and to make independent decisions
you need to be in control of your information space.
It is only possible if you use private communication platform
that does not have access to your social graph.
</p>
<p>
SimpleX is the first platform that doesn't have any user identifiers by design,
in this way protecting your connections graph better than any known alternative.
</p>

20
website/src/_includes/overlay_content/why_privacy_matters/card_3.html Normal file
View file

@ -0,0 +1,20 @@
<p>
Everyone should care about privacy and security of their communications &mdash;
harmless conversations can put you in danger, even if you have nothing to hide.
</p>
<p>
One of the most shocking stories is the experience of
<a href="https://en.wikipedia.org/wiki/Mohamedou_Ould_Slahi" target="_blank">Mohamedou Ould Salahi</a>
described in his memoir and shown in The Mauritanian movie.
He was put into Guantanamo camp, without trial, and was tortured there for 15 years
after a phone call to his relative in Afghanistan, under suspicion of being involved
in 9/11 attacks, even though he lived in Germany for the previous 10 years.
</p>
<p>
Ordinary people get arrested for what they share online, even via their "anonymous" accounts,
<a href="https://www.dailymail.co.uk/news/article-11282263/Moment-police-swoop-house-devout-catholic-mother-malicious-online-posts.html" target="_blank">even in democratic countries</a>.
</p>
<p>
It is not enough to use an end-to-end encrypted messenger,
we all should use the messengers that protect the privacy of our personal networks &mdash; who we are connected with.
</p>

19
website/src/_includes/overlay_content/why_simplex_is_unique/card_1.html Normal file
View file

@ -0,0 +1,19 @@
<p>
Unlike other messaging platforms, SimpleX has <strong>no identifiers assigned to the users</strong>.
It does not rely on phone numbers, domain-based addresses (like email or XMPP),
usernames, public keys or even random numbers to identify its users &mdash;
we don&apos;t know how many people use our SimpleX servers.
</p>
<p>
To deliver messages SimpleX uses
<a href="https://csrc.nist.gov/glossary/term/Pairwise_Pseudonymous_Identifier">pairwise anonymous addresses</a>
of unidirectional message queues, separate for received and sent messages,
usually via different servers.
Using SimpleX is like having <strong>a different &ldquo;burner&rdquo; email or phone
for each contact</strong>, and no hassle to manage them.
</p>
<p>
This design protects the privacy of who you are communicating with,
hiding it from SimpleX platform servers and from any observers.
To hide your IP address from the servers, you can <strong>connect to SimpleX servers via Tor</strong>.
</p>

9
website/src/_includes/overlay_content/why_simplex_is_unique/card_2.html Normal file
View file

@ -0,0 +1,9 @@
<p>
Because you have no identifier on the SimpleX platform,
nobody can contact you unless you share a one-time
or temporary user address, as a QR code or a link.
</p>
<p>
Even with the optional user address, while it can be used to send spam contact requests,
you can change or completely delete it without losing any of your connections.
</p>

21
website/src/_includes/overlay_content/why_simplex_is_unique/card_3.html Normal file
View file

@ -0,0 +1,21 @@
<p>
SimpleX Chat stores all user data only on client devices
using a <strong>portable encrypted database format</strong>
that can be exported and transferred to any supported device.
</p>
<p>
The end-to-end encrypted messages are held temporarily
on SimpleX relay servers until received,
then they are permanently deleted.
</p>
<p>
Unlike federated networks servers (email, XMPP or Matrix),
SimpleX servers don&apos;t store user accounts,
they only relay messages, protecting the privacy of both parties.
</p>
<p>
There are no identifiers or ciphertext in common
between sent and received server traffic &mdash;
if anybody is observing it, they cannot easily determine
who communicates with whom, even if TLS is compromised.
</p>

19
website/src/_includes/overlay_content/why_simplex_is_unique/card_4.html Normal file
View file

@ -0,0 +1,19 @@
<p>
You can <strong>use SimpleX with your own servers</strong>
and still communicate with people who use
the pre-configured servers provided by us.
</p>
<p>
SimpleX platform uses an <a href="https://github.com/simplex-chat/simplexmq/blob/stable/protocol/overview-tjr.md" target="_blank">open protocol</a>
and provides <a href="https://github.com/simplex-chat/simplex-chat/tree/stable/packages/simplex-chat-client/typescript" target="_blank">SDK to create chat bots</a>,
allowing implementation of services that users can interact with
via SimpleX Chat apps &mdash; we&apos;re really looking forward to see
what SimpleX services you can build.
</p>
<p>
If you are considering developing for the SimpleX platform,
for example, the chat bot for SimpleX app users, or
the integration of the SimpleX Chat library into your mobile apps,
please <a href="https://simplex.chat/contact#/?v=1&smp=smp%3A%2F%2FPQUV2eL0t7OStZOoAsPEV2QYWt4-xilbakvGUGOItUo%3D%40smp6.simplex.im%2FK1rslx-m5bpXVIdMZg9NLUZ_8JBm8xTt%23MCowBQYDK2VuAyEALDeVe-sG8mRY22LsXlPgiwTNs9dbiLrNuA7f3ZMAJ2w%3D" target="_blank">get in touch</a>
for any advice and support.
</p>

37
website/src/_includes/sections/join_simplex.html Normal file
View file

@ -0,0 +1,37 @@
{# join simplex #}
<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] px-5">
<div class="container flex flex-col items-center">
<p class="text-[35px] lg:text-[45px] text-grey-black dark:text-white text-center font-bold mb-4"><span class="text-active-blue">Join</span> SimpleX</p>
<p class="text-black dark:text-white text-base text-center mb-10">We invite you to join the conversion</p>
<div class="flex flex-col items-center gap-5 self-stretch mb-10">
<a href="https://www.reddit.com/r/SimpleXChat/" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join the REDDIT community</a>
<a href="https://github.com/simplex-chat" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border bg-[#D9ECFF]">Join us on GitHub</a>
<a href="https://github.com/simplex-chat/simplex-chat#help-us-with-donations" class="flex items-center justify-center h-11 w-full max-w-[294px] font-medium text-base rounded-[34px] tracking-[0.02em] text-primary-light dark:text-primary-dark dark:bg-primary-bg-dark dark:border-primary-dark dark:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">Donate here to help us</a>
</div>
<p class="text-black dark:text-white text-base text-center mb-5">Sign up to receive our updates</p>
<form class="flex items-center w-full max-w-[540px] mb-4"
action="https://chat.us2.list-manage.com/subscribe/post?u=ddd892b258ae36e5438e6d4e1&amp;id=ad6037a2fe"
method="post" target="_blank" novalidate>
<input name="EMAIL" type="text" class="h-[44px] rounded-l-[34px] bg-transparent border border-primary-light focus:outline-none text-primary-light dark:text-primary-dark text-base w-full max-w-[400px] px-5"
placeholder="Enter your email address">
<span style="position: absolute; left: -5000px" aria-hidden="true">
<input type="text" name="b_ddd892b258ae36e5438e6d4e1_ad6037a2fe" tabindex="-1" value="" />
</span>
<input type="submit" class="h-[44px] rounded-r-[34px] bg-primary-light text-white text-center px-8">
</form>
<hr class="block my-10 mx-5 dark:opacity-[0.2] w-full">
<p class="text-black dark:text-white text-center mb-5">Get SimpleX</p>
<div class="flex items-center justify-center gap-4 flex-wrap">
<a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
<a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank" title="Public iOS preview on TestFlight"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
<a href="https://app.simplex.chat" target="_blank" title="SimpleX F-Droid Repository"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
<a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
<a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
</div>
</div>
</section>

87
website/src/_includes/sections/simplex_unique.html Normal file
View file

@ -0,0 +1,87 @@
<section id="why-simplex" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[90px] overflow-hidden px-0 sm:px-1">
<div class="container scale-100">
<p class="text-grey-black dark:text-white text-[35px] lg:text-[45px] text-center font-bold mb-[44px] px-5 sm:px-4">Why SimpleX is <span class="gradient-text">unique</span></p>
<div class="swiper unique-swiper px-5 sm:px-4 py-2">
<div class="swiper-wrapper mb-16">
{% for section in why_simplex_is_unique.sections %}
<div class="swiper-slide overflow-hidden flex items-center md:items-start flex-col xl:flex-row-reverse xl:items-center min-h-[620px] md:min-h-fit px-4 md:px-10 lg:px-[50px] py-8 lg:py-[50px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative simplex-unique-card">
<div class="md:flex-1 flex items-center justify-center h-[55%] md:h-fit w-full card-image">
<img class="w-full max-w-[400px] dark:hidden" src="{{ section.imgLight }}" alt="">
<img class="w-full max-w-[400px] hidden dark:block" src="{{ section.imgDark }}" alt="">
</div>
<div class="card-content absolute md:static px-4 md:px-0 bottom-[80px] right-1 left-1 h-[180px] md:h-fit pt-5 lg:pt-0 bg-primary-bg-light dark:bg-primary-bg-dark">
<div class="content-head">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#{{ section.id }}</p>
<p class="w-full max-w-[617px] text-[25px] leading-[33px] lg:text-[35px] lg:leading-[45px] text-center md:text-left font-bold text-grey-black dark:text-white">{{ section.title | safe }}</p>
</div>
<div class="content-body py-5 md:py-7">
{% if section.descBody %}
<div class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left">
{% include section.descBody %}
</div>
{% else %}
<p class="w-full max-w-[541px] text-[16px] leading-[24px] tracking-[0.02em] mb-[36px] text-grey-black dark:text-white text-center md:text-left">{{ section.desc | safe }}</p>
{% endif %}
{% 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-4 tracking-[0.02em] text-center md:text-left">{{ section.overlayContent.linkText }}</a>
{% endif %}
</div>
</div>
<div class="hide-show-btn fixed bottom-0 pb-8 pt-2 h-[80px] left-1 right-1 md:hidden flex items-center justify-center bg-primary-bg-light dark:bg-primary-bg-dark scale-100 z-10">
<a href="javascript:void(0);" class="flex items-center gap-2 open-card-btn">
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
<span class="flex items-center justify-center mt-1">
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="6" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.50447 0.902966C1.21571 0.627397 0.747525 0.627397 0.458761 0.902966C0.169996 1.17853 0.169996 1.62532 0.458761 1.90089L4.21933 5.48961C4.25543 5.52406 4.29433 5.5542 4.33533 5.58003C4.62234 5.76088 5.01237 5.73074 5.26504 5.48961L9.02561 1.90089C9.31438 1.62532 9.31438 1.17853 9.02561 0.902966C8.73685 0.627397 8.26867 0.627397 7.97991 0.902966L4.74219 3.99273L1.50447 0.902966Z"/>
</svg>
</span>
</a>
<a href="javascript:void(0);" class="items-center gap-2 close-card-btn hidden">
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">Hide info</span>
<span class="flex items-center justify-center mt-1">
<svg class="fill-primary-light dark:fill-primary-dark" width="10" height="5" viewBox="0 0 10 5" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.40813 4.79332C8.69689 5.06889 9.16507 5.06889 9.45384 4.79332C9.7426 4.51775 9.7426 4.07097 9.45384 3.7954L5.69327 0.206676C5.65717 0.17223 5.61827 0.142089 5.57727 0.116255C5.29026 -0.064587 4.90023 -0.0344467 4.64756 0.206676L0.886983 3.7954C0.598219 4.07097 0.598219 4.51775 0.886983 4.79332C1.17575 5.06889 1.64393 5.06889 1.93269 4.79332L5.17041 1.70356L8.40813 4.79332Z"/>
</svg>
</span>
</a>
</div>
</div>
{% endfor %}
</div>
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next hidden md:inline-block dark:hidden" src="/img/new/arrow-right.svg" alt="">
<img class="fixed left-[-3px] top-[52%] swiper-button-prev unique-swiper-button-prev hidden dark:md:inline-block" src="/img/new/arrow-left-dark.svg" alt="">
<img class="fixed right-[-6px] top-[52%] swiper-button-next unique-swiper-button-next hidden dark:md:inline-block" src="/img/new/arrow-right-dark.svg" alt="">
<div class="swiper-pagination simplex-unique-swiper-pagination mt-100"></div>
</div>
</div>
</section>
{% for section in why_simplex_is_unique.sections %}
{% if section.overlayContent %}
{{ overlay(section) }}
{% endif %}
{% endfor %}
<script>
window.addEventListener('load', function() {
window.addEventListener('click',e=>{
if(e.target.closest('.open-card-btn') || e.target.closest('.close-card-btn')){
e.target.closest('.simplex-unique-card').classList.toggle('active-card');
e.target.closest('.hide-show-btn').querySelector('.open-card-btn').classList.toggle('hidden');
e.target.closest('.hide-show-btn').querySelector('.open-card-btn').classList.toggle('flex');
e.target.closest('.hide-show-btn').querySelector('.close-card-btn').classList.toggle('hidden');
e.target.closest('.hide-show-btn').querySelector('.close-card-btn').classList.toggle('flex');
}
})
});
</script>

9
website/src/_includes/sections/simplex_unique/card_1.html Normal file
View file

@ -0,0 +1,9 @@
<p style="padding-bottom:6px;">
SimpleX protects the privacy of your profile, contacts and metadata,
hiding it from SimpleX platform servers and any observers.
</p>
<p>
Unlike any other existing messaging platform,
SimpleX has no identifiers assigned to the users &mdash;
<strong>not even random numbers</strong>.
</p>

5
website/src/_includes/sections/simplex_unique/card_2.html Normal file
View file

@ -0,0 +1,5 @@
<p>
Because you have no identifier or fixed address on the SimpleX platform,
nobody can contact you unless you share a one-time
or temporary user address, as a QR code or a link.
</p>

7
website/src/_includes/sections/simplex_unique/card_3.html Normal file
View file

@ -0,0 +1,7 @@
<p style="padding-bottom:5px;">
SimpleX stores all user data on client devices in a <strong>portable encrypted database format</strong> &mdash;
it can be transferred to another device.
</p>
<p>
The end-to-end encrypted messages are held temporarily on SimpleX relay servers until received, then they are permanently deleted.
</p>

7
website/src/_includes/sections/simplex_unique/card_4.html Normal file
View file

@ -0,0 +1,7 @@
<p style="padding-bottom:6px;">
The SimpleX network is fully decentralised and independent of any crypto-currency or any other platform, other than the Internet.
</p>
<p>
You can <strong>use SimpleX with your own servers</strong>
or with the servers provided by us &mdash; and still connect to any user.
</p>

116
website/src/_includes/simplex_explained.html Normal file
View file

@ -0,0 +1,116 @@
<style>
.tab-button {
color: #a8b0b4;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(to bottom, #a8b0b4, transparent) border-box;
border: 1px solid transparent;
border-radius: 6px 6px 0px 0px;
transition: color 0.3s ease;
text-decoration: underline;
text-underline-offset: 3px;
}
.dark .tab-button{
color: #fff;
background: linear-gradient(#0C0B13, #0C0B13) padding-box,
linear-gradient(to bottom, #01F1FF, transparent) border-box;
}
.tab-button.active {
color: #0053d0;
text-decoration: none;
}
.dark .tab-button.active {
color: #70F0F9;
}
</style>
<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark py-[80px] px-5">
<div class="container">
<p class="text-[35px] lg:text-[45px] text-center font-bold text-grey-black dark:text-white mb-[40px]">Simplex explained</p>
<!-- Tab links -->
<div class="tabs hidden md:flex gap-2 mb-16">
<div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">1. What users experience</div>
<div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">2. How does it work</div>
<div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">3. What servers see</div>
</div>
<!-- Tab content -->
<div class="swiper simplex-explained-swiper">
<div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">1. What users experience</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-1.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
You can create contacts and groups, and have two-way conversations, as in any other messenger.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
How can it work with unidirectional queues and without user profile identifiers?
</p>
</div>
</div>
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">2. How does it work</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-2.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
For each connection you use two separate messaging queues to send and receive messages via different servers.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Servers only pass messages one way, without having the full picture of user's conversation or connections.
</p>
</div>
</div>
<div class="swiper-slide h-[inherit]">
<div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">3. What servers see</div>
<div class="flex flex-col justify-center items-center">
<img class="h-[340px] my-16" src="/img/new/explained-3.svg" alt="" />
<p class="text-black dark:text-white text-[16px] font-normal text-center mt-[30px]">
The servers have separate anonymous credentials for each queue, and do not know which users they belong to.
</p>
<p class="text-black dark:text-white text-[16px] font-normal text-center">
Users can further improve metadata privacy by using Tor to access servers, preventing corellation by IP address.
</p>
</div>
</div>
</div>
<div class="swiper-pagination simplex-explained-swiper-pagination mt-100 md:hidden"></div>
</div>
</div>
</section>
<script>
window.addEventListener("load", function () {
const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
simplexExplainedSwiper__bullets.forEach((el,index) => {
if (el.classList.contains("swiper-pagination-bullet-active")) {
simplexExplainedSwiper__tabs[index].classList.add("active");
} else {
simplexExplainedSwiper__tabs[index].classList.remove("active");
}
});
}
});
});
const targetNode = document.querySelector(".simplex-explained-swiper .swiper-pagination");
observer.observe(targetNode, { attributes: true });
window.addEventListener('click',e=>{
if(e.target.closest("#simplex-explained .tabs .tab-button")){
const index = e.target.closest("#simplex-explained .tabs .tab-button").dataset.btnIndex;
simplexExplainedSwiper__bullets[index].click();
}
})
});
</script>

119
website/src/blog.html
View file

@ -1,48 +1,75 @@
<!DOCTYPE html>
<html lang="en">
<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">
<link href="/css/tailwind.css" rel="stylesheet" />
<link href="/css/blogs.css" rel="stylesheet" />
<link href="/css/style.css" rel="stylesheet" />
<title>Blogs</title>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body class="bg-gray-100">
{% include "nav.html" %}
---
layout: layouts/main.html
title: "SimpleX blog: the latest news"
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/blog"
templateEngineOverride: njk
active_blog: true
---
{% block css_links %}
<style>
#blog-list ul li {
list-style: disc;
}
#blog-list ul {
list-style-position: inside;
overflow: auto;
}
#blog-list ul li {
-webkit-margin-start: 1rem;
color: #000;
}
.dark #blog-list ul li {
color: #fff;
}
#blog-list ul li::marker {
color: black;
}
.dark #blog-list ul li::marker {
color: white;
}
</style>
{% endblock %}
<section class="container">
{% for blog in collections.blogs %}
<article class="bg-white my-3 py-8 px-6 sm:px-8 md:px-12 lg:px-16 rounded-lg hover:shadow-md ">
<h1 class="text-xl font-medium">{{ blog.data.title }}</h1>
<p class="text-sm">{{ blog.data.date.toUTCString().split(' ').slice(0, 4).join(' ') }}</p>
<a class="inline-block mt-5 hover:underline" href="{{ blog.url }}">Read More</a>
<br>
</article>
<section class="py-10 px-5 mt-[66px]" id="blog-list">
<div class="container">
<p class="text-[38px] text-center font-bold text-active-blue mb-9">Latest news</p>
{% for blog in collections.blogs %}
<article class="w-full flex flex-col items-start md:flex-row rounded-[4px] overflow-hidden shadow-[0px_20px_30px_rgba(0,0,0,0.12)] dark:shadow-none bg-white dark:bg-[#11182F] mb-8">
<div class="min-h-[200px] h-[inherit] self-stretch md:w-[168px] bg-[#D9E7ED] dark:bg-[#17203D] flex items-center justify-center flex-[1] relative">
<div class="min-h-[inherit] h-full w-full flex items-end px-4 pt-4 justify-center relative">
{% if blog.data.image %}
{% if blog.data.imageBottom %}
<img class="w-full max-w-[240px] h-auto" src="{{ blog.data.image }}" alt="" srcset=""/>
{% else %}
<img class="mb-4 w-full max-w-[240px] h-auto" src="{{ blog.data.image }}" alt="" srcset=""/>
{% endif %}
{% else %}
<img class="h-[44px] self-center dark:hidden" src="/img/new/logo-symbol-light.svg" alt="" srcset=""/>
<img class="h-[44px] self-center hidden dark:inline-block" src="/img/new/logo-symbol-dark.svg" alt="" srcset=""/>
{% endif %}
</div>
</div>
<div class="p-6 md:py-8 flex-[2.5] flex flex-col">
<div>
<h1 class="text-grey-black dark:text-white text-lg md:text-xl font-bold ">
<a href="{{ blog.url }}">{{ blog.data.title | safe }}</a>
</h1>
<p class="text-sm text-[#A8B0B4] font-medium mt-2 mb-4 tracking-[0.03em]">
{{ blog.data.date.toUTCString().split(' ').slice(0, 4).join(' ') }}
</p>
{% if blog.data.previewBody %}
<div class="mb-4 dark:text-white">
{% include blog.data.previewBody %}
</div>
{% elif blog.data.preview %}
<p class="dark:text-white mb-4">{{ blog.data.preview | safe }}</p>
{% endif %}
</div>
<a class="block text-primary-light dark:text-[#70F0F9] text-base font-medium tracking-[0.03em] mt-auto" href="{{ blog.url }}">Read More</a>
</div>
</article>
{% endfor %}
</section>
<footer>
<div class="container">
<img alt="simplex logo" class="logo d-none-992" src="/img/simplex.svg" />
<p class="copyright">&#169; 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span>
<a class="d-none-576" href="https://github.com/simplex-chat" target="_blank"><img
src="/img/icons/github.svg"></a>
<a class="d-none-576" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
src="/img/icons/reddit.svg"></a>
<a class="d-none-576" href="https://twitter.com/simplexchat" target="_blank"><img
src="/img/icons/twitter.svg"></a>
<a class="d-none-576" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
src="/img/icons/linkedin.svg"></a>
<a class="d-none-576" href="mailto:chat@simplex.chat" target="_blank"><img src="/img/icons/email.svg"></a>
</p>
<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>
</div>
</section>

9
website/src/contact.html Normal file
View file

@ -0,0 +1,9 @@
---
layout: layouts/main.html
title: "SimpleX Chat - Contact"
header: "You have been sent a link to connect on SimpleX Chat"
ogURL: "https://simplex.chat/"
templateEngineOverride: njk
---
{% include "contact_page.html" %}

187
website/src/contact/index.html
View file

@ -1,187 +0,0 @@
<!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 global identities</title>
<link rel="icon" type="image/png" sizes="96x96" href="/img/favicon.ico">
<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 name="twitter:card" content="summary" />
<link href="/css/tailwind.css" rel="stylesheet" />
<link href="../css/contact.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<script src="qrcode.js"></script>
<script async defer src="index.js"></script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body>
{% include "nav.html" %}
<section id="conn_req">
<div class="container">
<h2>This link is the <span class=conn_mode>invitation from</span> a SimpleX Chat user</h2>
<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"><img src="../img/google_play.svg" height="41"></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" title="Public iOS preview on TestFlight"><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>
<div class="conn_req_uri">
<div class="d-none-992">
<p>If you already installed <a class="chat-for-terminal"
href="https://github.com/simplex-chat/simplex-chat">SimpleX Chat for the
terminal</a> v1.0.0+, copy the command below and use it in the chat:
</p>
<p class="content_copy_with_tooltip">
<textarea readonly class="content" id="conn_req_uri_text"></textarea>
<span class="tooltip">
<span class="tooltiptext" id="copy_conn_req_uri_tooltip">Copy to clipboard</span>
<img class="content_copy" id="copy_conn_req_uri" src="../img/icons/content-copy.svg">
</span>
</p>
</div>
<div class="conn_req__qrcode">
<img class="d-none-576" src="../img/mobile.png" alt="">
<div>
<p class="d-none-576">Scan QR code from mobile app</p>
<p class="d-none-on-mobile">
To make a connection:
</p>
<ol class="d-none-on-mobile">
<li>install SimpleX app</li>
<li>tap the button below</li>
<li>tap <strong>Connect</strong> button in the app</li>
</ol>
<div class="open-in-mobile">
<a id="mobile_conn_req_uri" href="" target="_blank">
<span class="button">Connect in SimpleX app</span></a>
</div>
<canvas id="conn_req_uri_qrcode" class="d-none-576"></canvas>
</div>
</div>
</div>
</div>
</section>
<section id="install_chat">
<div class="container">
<h2>To install SimpleX Chat for the terminal</h2>
<div class="install__command d-none-576">
<p>
use this command:
</p>
<div class="content_copy_with_tooltip install">
<p class="content">curl -o- https://raw.githubusercontent.com/simplex-chat/simplex-chat/master/install.sh
|
bash
<span class="tooltip">
<span class="tooltiptext">Copy to clipboard</span>
<img class="content_copy" src="../img/icons/content-copy.svg">
</span>
</p>
</div>
</div>
<div class="github__redirection">
<p>
See SimpleX Chat
<a href="https://github.com/simplex-chat/simplex-chat">GitHub repository</a>
<a href="https://github.com/simplex-chat/simplex-chat" class="github"><img src="../img/icons/github.svg"></a>
for the instructions how to download or compile it from the source code.
</p>
</div>
</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" />
<p class="copyright">&#169; 2020-22 SimpleX | Open-Source Project <span class="d-none-576">|</span>
<a class="d-none-576" href="https://github.com/simplex-chat" target="_blank"><img
src="../img/icons/github.svg"></a>
<a class="d-none-576" href="https://www.reddit.com/r/SimpleXChat/" target="_blank"><img
src="../img/icons/reddit.svg"></a>
<a class="d-none-576" href="https://twitter.com/simplexchat" target="_blank"><img
src="../img/icons/twitter.svg"></a>
<a class="d-none-576" href="https://www.linkedin.com/company/simplex-chat/" target="_blank"><img
src="../img/icons/linkedin.svg"></a>
<a class="d-none-576" href="mailto:chat@simplex.chat" target="_blank"><img src="../img/icons/email.svg"></a>
</p>
<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>

67
website/src/contact/index.js
View file

@ -1,67 +0,0 @@
(function () {
let complete = false
run()
window.onload = run
async function run() {
const connURIel = document.getElementById("conn_req_uri_text");
const mobileConnURIanchor = document.getElementById("mobile_conn_req_uri");
const connQRCode = document.getElementById("conn_req_uri_qrcode");
if (complete || !connURIel || !mobileConnURIanchor || !connQRCode) return
complete = true
const connURI = document.location.toString().replace(/\/(contact|invitation)\//, "/$1");
connURIel.innerText = "/c " + connURI;
mobileConnURIanchor.href = connURI.replace("https://simplex.chat", "simplex:");
if (document.location.pathname.indexOf("/contact") >= 0) {
let connModeEl = document.querySelector("#conn_req .conn_mode")
if (connModeEl) connModeEl.innerText = "address of";
}
const els = document.querySelectorAll(".content_copy_with_tooltip");
if (navigator.clipboard) {
els.forEach(contentCopyWithTooltip)
} else {
const tooltips = document.querySelectorAll(".content_copy_with_tooltip .tooltip");
tooltips.forEach(el => el.style.visibility = "hidden")
}
try {
await QRCode.toCanvas(connQRCode, connURI, {
errorCorrectionLevel: "M",
color: {dark: "#062D56"}
});
connQRCode.style.width = "360px";
connQRCode.style.height = "360px";
} catch (err) {
console.error(err);
}
function contentCopyWithTooltip(parent) {
const content = parent.querySelector(".content");
const tooltip = parent.querySelector(".tooltiptext");
console.log(parent.querySelector(".content_copy") ,111)
console.log(parent)
const copyButton = parent.querySelector(".content_copy");
copyButton.addEventListener("click", copyAddress)
copyButton.addEventListener("mouseout", resetTooltip)
function copyAddress() {
navigator.clipboard.writeText(content.innerText || content.value);
tooltip.innerHTML = "Copied!";
}
function resetTooltip() {
tooltip.innerHTML = "Copy to clipboard";
}
}
function copyAddress() {
navigator.clipboard.writeText(connURI);
tooltipEl.innerHTML = "Copied!";
}
function resetTooltip() {
tooltipEl.innerHTML = "Copy to clipboard";
}
}
})();

204
website/src/css/blog.css
View file

@ -1,71 +1,164 @@
h1 {
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.6px;
#article h1 {
font-size: 38px;
font-weight: 700;
letter-spacing: 0.02em;
background: -webkit-linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
background: linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
margin-bottom: 32px;
}
section.container > div > p:nth-child(2) {
@media (min-width:768px) {
#article h1 {
font-size: 45px;
margin-bottom: 50px;
}
}
.dark #article h1 {
background: -webkit-linear-gradient(to bottom, #70F0F9 100%, #70F0F9 100%);
background: linear-gradient(to bottom, #70F0F9 100%, #70F0F9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
section.container>div>p:nth-child(2) {
margin: 0;
margin-bottom: 2rem;
margin-top: 4px;
font-size: 1rem;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.03em;
color:
#3F484B;
}
h2 {
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 2.2rem;
.dark section.container>div>p:nth-child(2) {
color: #A8B0B4;
}
h3 {
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.6px;
margin-bottom: 1rem;
margin-top: 1.8rem;
#article h2 {
font-size: 28px;
font-weight: 700;
color: #3F484B;
}
ul li,
ol li {
text-decoration: none;
/* list-style: none; */
font-size: 1.1rem;
line-height: 30px;
letter-spacing: 0.6px;
margin: 0.5rem 0;
-webkit-margin-start: 1rem;
@media (min-width:768px) {
#article h2 {
font-size: 38px;
}
}
ul,
ol {
.dark #article h2 {
color: white;
}
#article h3 {
font-size: 20px;
font-weight: 700;
letter-spacing: 0.02em;
color: #606C71;
margin: 50px 0 25px 0;
}
@media (min-width:768px) {
#article h3 {
font-size: 28px;
}
}
.dark #article h3 {
color: white;
}
#article p {
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: black;
margin: 1.2rem 0;
}
.dark #article p {
color: white;
}
#article ul,
#article ol {
list-style-position: inside;
/* list-style-type: decimal; */
overflow: auto;
margin: 1rem 0;
}
ul li::marker,
ol li::marker {
/* content: "-> "; */
font-weight: 600;
/* color: #fbd561; */
#article ul li,
#article ol li {
-webkit-margin-start: 1rem;
color: #000;
}
.dark #article ul li,
.dark #article ol li {
color: #fff;
}
#article ul li::marker,
#article ol li::marker {
color: black;
}
.dark #article ul li::marker,
.dark #article ol li::marker {
color: white;
}
#article ul li a,
#article ol li a {
line-height: 30px;
}
#article ul li {
list-style: disc;
}
#article ol li {
list-style: decimal;
}
#article a {
color: #0053D0;
text-decoration: underline;
text-underline-offset: 4px;
}
.dark #article a {
color: #70F0F9;
}
pre {
overflow: auto;
}
.dark pre {
color: white;
}
/* code{
width: 100%;
height: auto;
} */
p {
margin: 1rem 0;
}
html {
scroll-behavior: smooth;
}
h1::before,
/* h1::before,
h2::before,
h3::before {
display: block;
@ -74,8 +167,35 @@ h3::before {
height: 80px;
visibility: hidden;
pointer-events: none;
}
} */
:focus {
outline: none;
}
p,
a,
h1,
h2,
h3,
h4,
h5,
h6,
li,
ul,
ol,
span,
div,
blockquote,
pre,
code {
clear: both;
}
#article p img {
float: left;
}
#article img {
margin-bottom: 1.5rem;
}

645
website/src/css/style.css
View file

@ -1,17 +1,654 @@
html {
scroll-behavior: smooth;
@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;
}
#comparison::before {
@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, Helvetica, sans-serif;;
letter-spacing: 0.003em;
}
/* #comparison::before {
display: block;
content: " ";
margin-top: -80px;
height: 120px;
visibility: hidden;
pointer-events: none;
}
} */
/* .nav-button-active{
background-color: #00C8FB;
color: #fff;
} */
/* NEW SITE */
.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
width: 100%;
/* padding: 0 20px; */
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;
}
}
.gradient-text {
background: -webkit-linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
background: linear-gradient(to bottom, #53C1FF -50%, #0053D0 160%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.dark .border-gradient {
background:
linear-gradient(#11182F, #11182F) padding-box,
linear-gradient(to bottom, transparent, #01F1FF 58%) border-box;
border: 1px solid transparent;
}
.dark .only-light {
display: none;
}
.only-dark {
display: none;
}
.dark .only-dark {
display: inherit;
}
.dark .unique-swiper .border-gradient{
background:
linear-gradient(#0C0B13, #0C0B13) padding-box,
linear-gradient(to bottom, transparent, #01F1FF 58%) border-box;
border: 1px solid transparent;
}
/* Nav and Menu */
#why-simplex::before,
#features::before,
#simplex-privacy::before,
#simplex-network::before {
display: block;
content: " ";
margin-top: -26px;
height: 66px;
visibility: hidden;
pointer-events: none;
}
.menu-link{
font-size: 16px;
line-height: 33.42px;
color: #0D0E12;
}
.dark .menu-link{
color: #fff;
}
@media (min-width:1024px) {
.nav-link-text,
.menu-link {
display: inline-block;
position: relative;
color: #0D0E12;
}
.nav-link-text::before,
.active .nav-link-text::before,
.menu-link::before {
content: "";
position: absolute;
width: 0;
height: 1px;
bottom: 0;
right: 0;
/* background-color: initial; */
transition: width 0.25s ease-out;
}
.menu-link::before {
background-color: #0D0E12;
}
.dark .menu-link::before {
background-color: #fff;
}
.active .nav-link-text::before {
width: 100%;
}
.nav-link:hover .nav-link-text::before,
.menu-link:hover::before {
width: 100%;
left: 0;
right: auto;
}
}
.sub-menu {
visibility: hidden;
opacity: 0;
color: #505158;
}
.dark .sub-menu {
color: #fff;
}
.dark .sub-menu li:hover {
color: #66D9E2;
}
.sub-menu li:hover {
color: #0053D0;
}
.sub-menu {
transition: all .3s ease !important;
}
.nav-link span svg,
header nav {
transition: all 0.5s ease;
}
.nav-link:hover span svg {
transform: rotate(180deg);
}
/* @media (max-width: 1400px) {
.landing-page-header-article-paragraph {
width: 21rem;
}
.socials {
flex-wrap: nowrap;
}
} */
@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;
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);
}
}
.lock-scroll {
overflow: hidden;
}
/* Swipe Sections */
.hash-number {
background: linear-gradient(251.16deg, #53C1FF 1.1%, #0053D0 100.82%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.swiper-button-disabled{
opacity: 0;
pointer-events: none;
display: none !important;
}
.swiper-pagination-bullet {
height: 14.31px;
width: 14.31px;
margin: 0 5px !important;
}
.dark .swiper-pagination-bullet{
background: #D4D4D433;
opacity: .8;
}
.swiper-pagination-bullet-active{
opacity: 1 !important;
}
.swiper-pagination-bullet-active {
background-color: #0197FF !important;
}
.dark .swiper-pagination-bullet-active{
background-color: #70F0F9 !important;
}
.swiper-button-next,
.swiper-button-prev {
height: 40px;
width: 40px;
}
.swiper-button-disabled {
display: none;
}
.unique-swiper .swiper-slide,
.unique-swiper .swiper-wrapper{
height: inherit;
}
.swiper-scrollbar-horizontal {
margin-top: 40px !important;
width: 302.06px !important;
height: 7.73px !important;
left: 50% !important;
transform: translateX(-50%) !important;
transform: translateX(-50%) !important;
}
.swiper-scrollbar-drag {
width: 112px !important;
height: 8px !important;
background-color: #0197FF;
}
.dark .swiper-scrollbar-drag{
background-color: #70F0F9;
}
/* What makes simplex private */
.card{
cursor: pointer;
}
.card,
.card > div:nth-child(2),
.card > div:nth-child(1) {
transition: all .5s ease;
}
.card > div:nth-child(2) > *:nth-child(2),
.card > div:nth-child(2) > *:nth-child(3) {
opacity: 0;
max-height: 0;
transform: translateY(20px);
transition: all .5s ease-out;
}
.card > div:nth-child(2) > *:nth-child(3) {
transform: translateY(40px);
}
.card:hover > div:nth-child(1) {
height: 200px;
padding: 12px 10px;
}
.card:hover > div:nth-child(2) {
height: 270px;
padding: 8px 24px;
}
.card.card-active > div:nth-child(2) {
height: 470px;
}
.card:hover > div:nth-child(2) > *:nth-child(2),
.card:hover > div:nth-child(2) > *:nth-child(3),
.card.card-active > div:nth-child(2) > *:nth-child(2),
.card.card-active > div:nth-child(2) > *:nth-child(3) {
opacity: 1;
max-height: 470px;
transform: translateY(0px);
}
.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3){
opacity: 0;
}
/* SimpleX Unique */
.simplex-unique-card .card-content{
transition: all .5s ease-out;
}
@media (max-width: 768px) {
.simplex-unique-card .card-content .content-body{
height: 0;
opacity: 0;
visibility: hidden;
transform: translateY(80px);
transition: all .7s ease;
}
.simplex-unique-card.active-card .card-content .content-body{
max-height: 540px;
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
.simplex-unique-card.active-card .card-content{
height: 540px;
}
.open-card-btn svg,
.close-card-btn svg{
transition: all .5s ease;
}
.open-card-btn:hover svg,
.close-card-btn:hover svg{
transform: rotate(180deg);
}
}
/* comparison */
#comparison table td,
#comparison table th {
font-size: 15px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.4;
letter-spacing: 0.47px;
}
/* hero */
header{
transition: all .7s ease;
}
.primary-header {
background: linear-gradient(270deg, #0053D0 35.85%, #0197FF 94.78%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0px 4px 74px #e9e7e2;
}
.dark .primary-header{
background: linear-gradient(270deg,#70F0F9 100%, #70F0F9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
}
.secondary-header {
color: #606c71;
text-shadow: 0px 4px 74px #e9e7e2;
}
.dark .secondary-header{
color: #fff;
text-shadow: none;
}
.hero-phone-background {
background-image: url("/img/new/bg_gfx.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
/* width: 644px;
height: 644px;
margin-bottom: 5rem; */
/* position: fixed; */
/* justify-content: center;
align-items: center;
align-content: center;
justify-items: center;
*/
}
#hero-phone-light, #hero-phone-dark {
position: relative;
animation-name: none;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#hero-phone-video {
/* position: absolute;
border-radius: 10px;
background-color: black;
animation-name: none; */
/* border-top-right-radius: 25px; */
/* border-top-left-radius: 32px; */
animation-duration: 2s;
animation-fill-mode: forwards;
/* height: 580px;
width: 256px; */
/* margin-left: 0.3rem;
margin-bottom: 0.1rem; */
}
.description {
width: 31rem;
}
@media (max-width: 1400px) {
/* #hero-phone-video {
border-radius: 15px;
height: 500px;
width: 227px;
margin-bottom: 4.7rem;
} */
}
@keyframes small {
0% {
transform: scale(1);
}
100% {
transform: scale(0.66);
}
}
@keyframes big {
0% {
transform: scale(0.66);
}
100% {
transform: scale(1);
}
}
@keyframes bigvideo {
0% {
transform: scale(0.66);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.tablet-hero-phone-background {
background-image: url("../Images/bg_gfx.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
width: 40%;
top: 5%;
left: 30%;
}
.tablet-hero-phone {
transform: skewY(25deg);
}
/* Overlays */
.overlay a,
p a{
color: #0053D0;
text-decoration: underline;
text-underline-offset: 2px;
}
.dark .overlay a,
.dark p a{
color: #70F0F9;
}
/* For Contact & Invitation Page */
.primary-header-contact {
background: linear-gradient(251.16deg, #53c1ff 1.1%, #0053d0 100.82%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0px 4px 74px #e9e7e2;
}
.dark .primary-header-contact{
background: linear-gradient(270deg,#70F0F9 100%, #70F0F9 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
}
.secondary-header-contact {
text-shadow: 0px 4px 74px #e9e7e2;
}
.dark .secondary-header-contact {
text-shadow: none;
}
.content_copy_with_tooltip {
background-color: #f8f8f6;
border-radius: 50px;
padding-bottom: 4px;
padding-top: 8px;
margin-top: 16px;
margin-bottom: 16px;
}
.content_copy_with_tooltip .tooltip {
vertical-align: -6px;
}
.content_copy_with_tooltip .content {
font-size: 15px;
}
.contact-tab > .contact-tab-content{
opacity: 0;
max-height: 0;
transition: all 0.5s ease;
visibility: hidden;
transform: translateY(10px);
overflow: hidden;
}
.contact-tab svg{
transform: rotate(-180deg);
transition: all .5s ease;
}
.contact-tab.active > .contact-tab-content{
opacity: 1;
max-height: 300px;
visibility: visible;
transform: translateY(0px);
}
.for-tablet .contact-tab.active > .contact-tab-content{
min-height: 450px;
}
.contact-tab.active svg,
.contact-tab:hover svg{
transform: rotate(0deg);
}

13
website/src/css/swiper-bundle.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

BIN
website/src/fonts/GilroyBold/font.woff Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyBold/font.woff2 Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyLight/font.woff Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyLight/font.woff2 Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyMedium/font.woff Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyMedium/font.woff2 Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyRegular/font.woff Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyRegular/font.woff2 Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyRegularItalic/font.woff Normal file
View file

Binary file not shown.

BIN
website/src/fonts/GilroyRegularItalic/font.woff2 Normal file
View file

Binary file not shown.

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0000.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 24 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0001.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0002.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0003.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0004.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 45 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0005.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 54 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0006.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 58 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0007.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 62 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0008.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 123 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0009.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 183 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0010.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 199 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0011.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 202 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0012.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 170 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0013.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 104 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0014.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 119 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0015.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0016.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 199 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0017.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 240 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0018.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 295 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0019.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 304 KiB

BIN
website/src/hero-phone-dark/fastImages/Darkphone1_0020.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 303 KiB

15
website/src/hero-phone-dark/index.html
View file

@ -1,15 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" media="screen" href="./index.css"> -->
<script src="./index.js"></script>
</head>
<body>
<img id="hero-phone" />
<div id="hero-phone-preload" style="display: none;"></div>
</body>
</html>

69
website/src/hero-phone-dark/index.js
View file

@ -1,69 +0,0 @@
(function () {
const fastImages = mkSequence("./fastImages/Darkphone1_", 0, 20, ".png")
const slowImages = mkSequence("./slowImages/Darkphone1_", 8, 38, ".png")
let complete = false
run()
window.onload = run
function mkSequence(prefix, from, to, ext) {
const seq = []
for (let n = from; n <= to; n++) {
let suffix = '' + n
suffix = '0'.repeat(4 - suffix.length) + suffix
seq.push(prefix + suffix + ext)
}
return seq
}
async function run() {
const imageEl = document.getElementById("hero-phone");
const preloadEl = document.getElementById("hero-phone-preload");
if (complete || !imageEl || !preloadEl) return
complete = true
await preload(fastImages.concat(slowImages))
await animate(fastImages, 100)
await animate(slowImages, 500)
async function preload(images) {
let imgEls = []
let resolved = false
return new Promise((resolve) => {
setTimeout(() => {
if (!resolved) {
resolved = true
resolve()
}
}, 2000)
for (const img of images) {
const el = document.createElement("img");
el.src = img
imgEls.push(el)
preloadEl.appendChild(el)
const loaded = () => {
imgEls = imgEls.filter((e) => e !== el)
if (imgEls.length === 0 && !resolved) {
resolved = true
resolve()
}
}
el.addEventListener('load', loaded)
el.addEventListener('error', loaded)
}
})
}
async function animate(images, ms) {
for (const img of images) {
imageEl.src = img
await delay(ms)
}
}
async function delay(ms) {
return new Promise((resolve) => setTimeout(resolve, ms))
}
}
})();

BIN
website/src/hero-phone-dark/slowImages/Darkphone1_0008.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 323 KiB

Some files were not shown because too many files have changed in this diff Show more