IntenseFinance/simplex-chat
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added overlay & data to some sections

Browse Source
This commit is contained in:
M Sarmad Qadeer 2022-10-28 19:07:45 +05:00
parent 15714882a5
commit b22c6b6778
6 changed files with 292 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,52 @@
{
"sections": [
{
"id": 1,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-1.svg",
"imgDark": "/img/new/feature-1-dark.svg"
},
{
"id": 2,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-2.svg",
"imgDark": "/img/new/feature-2-dark.svg"
},
{
"id": 3,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-3.svg",
"imgDark": "/img/new/feature-3-dark.svg"
},
{
"id": 4,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-4.svg",
"imgDark": "/img/new/feature-4-dark.svg"
},
{
"id": 5,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-5.svg",
"imgDark": "/img/new/feature-5-dark.svg"
},
{
"id": 6,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-6.svg",
"imgDark": "/img/new/feature-6-dark.svg"
},
{
"id": 7,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-7.svg",
"imgDark": "/img/new/feature-7-dark.svg"
},
{
"id": 8,
"title": "Disappearing messages (comings soon)",
"imgLight": "/img/new/feature-8.svg",
"imgDark": "/img/new/feature-8-dark.svg"
}
]
}

104
website/src/_data/what_makes_simplex_private.json Normal file
View File

@ -0,0 +1,104 @@
{
"sections": [
{
"id": 1,
"title": "2-layers of end-to-end encryption",
"imgLight": "/img/new/private-1.svg",
"imgDark": "/img/new/private-1-dark.svg",
"points": [
"Double-ratchet protocol (OTR messaging with forward secrecy and break-in recovery).",
"E2E encryption in each queue to prevent traffic correlation between queues in case TLS is compromised."
]
},
{
"id": 2,
"title": "Additional layer of server encryption",
"imgLight": "/img/new/private-2.svg",
"imgDark": "/img/new/private-2-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 3,
"title": "Secure TLS 1.2/1.3",
"imgLight": "/img/new/private-3.svg",
"imgDark": "/img/new/private-3-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 4,
"title": "Optional access via Tor",
"imgLight": "/img/new/private-4.svg",
"imgDark": "/img/new/private-4-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 5,
"title": "Multiple layers of content padding",
"imgLight": "/img/new/private-5.svg",
"imgDark": "/img/new/private-5-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 6,
"title": "Out-of-band key exchange",
"imgLight": "/img/new/private-6.svg",
"imgDark": "/img/new/private-6-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 7,
"title": "Message integrity is guaranteed",
"imgLight": "/img/new/private-7.svg",
"imgDark": "/img/new/private-7-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 8,
"title": "Message mixing to prevent correlation",
"imgLight": "/img/new/private-8.svg",
"imgDark": "/img/new/private-8-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 9,
"title": "Unidirectional network",
"imgLight": "/img/new/private-9.svg",
"imgDark": "/img/new/private-9-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
},
{
"id": 10,
"title": "Temporary ephemeral pairwise identifiers",
"imgLight": "/img/new/private-10.svg",
"imgDark": "/img/new/private-10-dark.svg",
"points": [
"Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.",
"Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!"
]
}
]
}

39
website/src/_data/why_privacy_matters.json Normal file
View File

@ -0,0 +1,39 @@
{
"sections": [
{
"id": 1,
"title": "Invasive and manipulative advertising and price discrimination",
"imgLight": "/img/new/privacy-section-1.svg",
"imgDark": "/img/new/privacy-section-1.svg",
"overlayContent": {
"title": "More Information",
"linkText": "Learn more",
"showImage": true,
"paras": [
"Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers. This protects the privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers.",
"E2E encryption in each queue to prevent traffic correlation between queues in case TLS is compromised."
]
}
},
{
"id": 2,
"title": "Manipulation of elections",
"imgLight": "/img/new/privacy-section-2.svg",
"imgDark": "/img/new/privacy-section-2.svg",
"overlayContent": {
"title": "More Information",
"linkText": "Learn more",
"showImage": false,
"paras": [
"Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers. This protects the privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers."
]
}
},
{
"id": 3,
"title": "Protect against prosecution when you are innocent",
"imgLight": "/img/new/privacy-section-3.svg",
"imgDark": "/img/new/privacy-section-3.svg"
}
]
}

29
website/src/_includes/components/macro.njk Normal file
View File

@ -0,0 +1,29 @@
{% macro overlay(section) %}
{# Overlay is either hidder or flex #}
<div id="why-privacy-matters-{{ section.id }}" 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 before:opacity-90 items-center justify-center p-10 z-[10000]">
<div class="overlay-card max-w-[1276px] bg-white opacity-100 max-h-[660px] z-[10001] rounded-md shadow-[0px_3px_12px_rgba(0,0,0,0.2)] p-14 overflow-auto scale-100">
<h1 class="text-3xl font-bold text-active-blue mb-6">Title</h1>
<div class="flex gap-10 justify-between">
<div class="max-w-md">
<div class="text-grey-black dark:text-white flex flex-col gap-6 text-base">
{% for para in section.overlayContent.paras %}
<p>{{ para }}</p>
{% endfor %}
</div>
</div>
{% if section.overlayContent.showImage %}
<div class="max-w-md">
<div class="flex items-center justify-center">
<img class="w-full max-w-md min-w-[300px]" src="{{ section.imgLight }}" alt="">
</div>
</div>
{% endif %}
</div>
<svg class="fill-grey-black dark:fill-white fixed right-8 top-8 cursor-pointer close-overlay-btn" 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>
</div>
</div>
{% endmacro %}

281
website/src/index.html
View File

@ -2,118 +2,57 @@
layout: layouts/main.html
title: "SimpleX Chat"
---
{%- from "components/macro.njk" import overlay -%}
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px]">
<div class="container">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[32px]">Why privacy <span class="gradient-text">matters</span></p>
<p class="text-center text-[20px] font-medium mb-[86px] text-black dark:text-white">Preserving the privacy of your meta-data - <span class="text-active-blue">who you talk with</span> - protect you from:</p>
<div class="flex flex-col lg:flex-row gap-[20px] mb-[90px]">
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="flex items-center justify-center h-[215px]">
<img src="/img/new/privacy-section-1.svg" alt="">
</div>
<div class="h-[152px] flex flex-col items-center justify-between">
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Invasive and manipulative advertising and price discrimination</p>
<a href="" class="underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">Learn more</a>
</div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[20px] mb-[90px]">
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="flex items-center justify-center h-[215px]">
<img src="/img/new/privacy-section-2.svg" alt="">
{% for section in why_privacy_matters.sections %}
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="flex items-center justify-center h-[215px]">
<img src="{{ section.imgLight }}" alt="">
</div>
<div class="h-[152px] flex flex-col items-center justify-between">
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">{{ section.title }}</p>
{% if section.overlayContent %}
<a href="javascript:void(0);" data-show-overlay="why-privacy-matters-{{ section.id }}" class="open-overlay-btn underline text-primary-light dark:text-primary-dark block text-[16px] underline-offset-2 mb-[53px]">{{ section.overlayContent.linkText }}</a>
{{ overlay(section) }}
{% endif %}
</div>
</div>
<div class="h-[152px] flex flex-col items-center justify-between">
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Manipulation of elections</p>
</div>
</div>
{% endfor %}
<div class="bg-white dark:bg-transparent px-[34px] flex flex-col rounded-[12px] dark:rounded-[6px] shadow-[0px_50px_61px_rgba(0,0,0,0.12)] dark:shadow-none flex-[1] border-gradient">
<div class="flex items-center justify-center h-[215px]">
<img src="/img/new/privacy-section-3.svg" alt="">
</div>
<div class="h-[152px] flex flex-col items-center justify-between">
<p class="text-center font-medium leading-[28px] text-grey-black dark:text-white">Protect against prosecution when you are innocent</p>
</div>
</div>
</div>
<p class="text-center w-full max-w-[900px] text-[20px] leading-[28px] m-auto text-black dark:text-white">Or choose the app that lets you send stickers and offer lots of fun features in exchange for selling your data to the highest bidder.</p>
</div>
</section>
<!-- Why SimpleX is unique -->
{# Why SimpleX is unique #}
{% include "sections/simplex_unique.html" %}
<!------------------------------FEATURES---------------------------------------------------------------------->
{# Features #}
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[60px]">
<div class="container flex flex-col items-center gap-[50px]">
<p class="text-[45px] text-center font-bold gradient-text">
Features
</p>
<p class="text-[45px] text-center font-bold gradient-text">Features</p>
<div class="mb-[50px] grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-10 gap-y-20">
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-1.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-1-dark.svg" alt="" class="hidden dark:block"/>
{% for feature in features.sections %}
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="{{ feature.imgLight }}" alt="" class="dark:hidden"/>
<img src="{{ feature.imgDark }}" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] font-medium text-center w-full max-w-[265px]">{{ feature.title }}</p>
</div>
<p class="text-grey-black dark:text-white text-[16px] font-medium text-center w-full max-w-[265px]">Disappearing messages (comings soon)</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-2.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-2-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">E2E encrypted audio and video WebRTC calls</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-3.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-3-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">Decentralised secret groups – these groups do NOT have network-wide identifiers.</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-4.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-4-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">E2E encrypted voice messages (coming soon)</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-5.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-5-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] font-medium text-center w-full max-w-[265px]">E2E encrypted text messages with markdown support</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-6.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-6-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">E2E encrypted pictures and files</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-7.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-7-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">Portable chat database – easily move your profile to another device.</p>
</div>
<div class="flex flex-col items-center">
<div class="bg-white flex items-center justify-center w-[175px] h-[110px] rounded-[20px] border-[#859096] border-solid border-[1px] shadow-[2px_2px_0px_#859096] dark:border-none dark:shadow-none mb-[20px] border-gradient">
<img src="/img/new/feature-8.svg" alt="" class="dark:hidden"/>
<img src="/img/new/feature-8-dark.svg" alt="" class="hidden dark:block"/>
</div>
<p class="text-grey-black dark:text-white text-[16px] text-center font-medium w-full max-w-[265px]">Incognito</p>
</div>
{% endfor %}
</div>
</div>
</section>
<!-- what makes simplex private -->
{# what makes simplex private #}
<section class="bg-primary-bg-light dark:bg-primary-bg-dark py-[85px] overflow-hidden">
<div class="container scale-100">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[60px]">What makes SimpleX <span class="gradient-text">private</span></p>
@ -121,156 +60,23 @@ title: "SimpleX Chat"
<div class="swiper private-swiper overflow-hidden px-4 py-2">
<div class="swiper-wrapper mb-14">
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-1.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-1-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">2-layers of end-to-end encryption</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center"> 1) double-ratchet protocol (OTR messaging with forward secrecy and break-in recovery),</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">2) e2e encryption in each queue to prevent traffic correlation between queues in case TLS is compromised.</p>
{% for section in what_makes_simplex_private.sections %}
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="{{ section.imgLight }}" alt=""/>
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="{{ section.imgDark }}" alt=""/>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-2.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-2-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Additional layer of server encryption</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">{{ section.title }}</p>
<div class="flex-1 py-6 flex flex-col gap-4">
{% for point in section.points %}
<p class="text-grey-black dark:text-white text-[14px] text-center">{{ point }}</p>
{% endfor %}
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-3.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-3-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Secure TLS 1.2/1.3</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-4.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-4-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Optional access via Tor</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-5.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-5-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Multiple layers of content padding</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-6.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-6-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Out-of-band key exchange</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-7.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-7-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Message integrity is guaranteed</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-8.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-8-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Message mixing to prevent correlation</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-9.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-9-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Unidirectional network</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
<div class="card swiper-slide relative h-[460px] rounded-[20px] bg-card-bg-light dark:bg-card-bg-dark border-[#859096] border-solid border-[1px] dark:border-none shadow-[2px_2px_0px_#859096] dark:shadow-none overflow-hidden">
<div class="flex items-center justify-center py-12 px-6 h-[322px]">
<img class="w-full max-w-[223px] h-full max-h-[226px] dark:hidden" src="/img/new/private-10.svg" alt="" />
<img class="w-full max-w-[223px] h-full max-h-[226px] hidden dark:block" src="/img/new/private-10-dark.svg" alt="" />
</div>
<div class="flex flex-col items-center justify-between h-[138px] absolute bottom-0 py-6 px-8 bg-card-desc-bg-light dark:bg-card-desc-bg-dark rounded-b-[20px]">
<p class="text-grey-black dark:text-white text-[18px] my-4 font-bold leading-[26px] tracking-[0.01em] text-center">Temporary ephemeral pairwise identifiers</p>
<div class="flex-1 py-6 flex flex-col gap-4">
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quaerat, labore.</p>
<p class="text-grey-black dark:text-white text-[14px] text-center">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, consequatur!</p>
</div>
<p class="text-grey-black dark:text-white text-[12px] text-center">Tap to close</p>
</div>
</div>
{% endfor %}
</div>
<img class="fixed left-4 top-[55%] swiper-button-prev hidden md:inline-block dark:hidden" src="/img/new/arrow-left.svg" alt="">
@ -282,8 +88,7 @@ title: "SimpleX Chat"
</div>
</section>
<!------------------------------NETWORK---------------------------------------------------------------------->
{# Network #}
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[85px]">
<div class="container">
<p class="text-grey-black dark:text-white text-[45px] text-center font-bold mb-[21px]">SimpleX <span class="gradient-text">Network</span></p>

25
website/src/js/script.js
View File

@ -80,9 +80,34 @@ const privateSwiper = new Swiper('.private-swiper', {
},
});
const closeOverlay = (e) => {
e.target.closest('.overlay').classList.remove('flex');
e.target.closest('.overlay').classList.add('hidden');
document.body.classList.toggle('lock-scroll');
}
window.addEventListener('click', (e) => {
if (e.target.closest('.card')) {
e.target.closest('.card').classList.toggle('card-active');
e.target.closest('.card').classList.toggle('no-hover');
}
// ---------------For Overlay--------------------
else if (e.target.closest('.close-overlay-btn')) {
closeOverlay(e);
}
else if (e.target.closest('.overlay-card')) {
return;
}
else if (e.target.closest('.overlay')) {
closeOverlay(e);
}
else if (e.target.closest('.open-overlay-btn')) {
let id = e.target.closest('.open-overlay-btn').dataset.showOverlay;
let overlay = document.getElementById(id);
overlay.classList.remove('hidden');
overlay.classList.add('flex');
document.body.classList.toggle('lock-scroll');
}
// -----------------------------------------------
})