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

added overlay to simplex unique section

Browse Source 
added some improvements to other sections too
This commit is contained in:
M Sarmad Qadeer 2022-10-28 21:02:48 +05:00
parent b22c6b6778
commit 66dcd236cd
6 changed files with 135 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
website/src/_data/why_privacy_matters.json
View File

@ -6,9 +6,10 @@
"imgLight": "/img/new/privacy-section-1.svg",
"imgDark": "/img/new/privacy-section-1.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-1",
"title": "More Information",
"linkText": "Learn more",
"showImage": true,
"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.",
"E2E encryption in each queue to prevent traffic correlation between queues in case TLS is compromised."
@ -21,6 +22,7 @@
"imgLight": "/img/new/privacy-section-2.svg",
"imgDark": "/img/new/privacy-section-2.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-2",
"title": "More Information",
"linkText": "Learn more",
"showImage": false,

61
website/src/_data/why_simplex_is_unique.json Normal file
View File

@ -0,0 +1,61 @@
{
"sections": [
{
"id": 1,
"title": "Complete privacy of your identity, profile, contacts and metadata",
"desc": "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.",
"imgLight": "/img/new/unique-section-1.png",
"imgDark": "/img/new/unique-section-1-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-1",
"title": "Complete privacy of your identity, profile, contacts and metadata",
"linkText": "Learn how it improves privacy",
"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. Unlike any other existing messaging platform, SimpleX has no identifiers assigned to the users –- not even random numbers.",
"Privacy of who you are communicating with, hiding it from SimpleX platform servers and from any observers. 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": 2,
"title": "The best protection against spam and abuse",
"desc": "Because you have no identifier on the SimpleX platform, you cannot be contacted unless you share a one-time “burner” or temporary user address.",
"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 against spam and abuse",
"linkText": "Learn how it improves privacy",
"showImage": true,
"paras": [
"Because you have no identifier on the SimpleX platform, you cannot be contacted unless you share a one-time “burner” or temporary user address."
]
}
},
{
"id": 3,
"title": "Ownership, control and security of your data",
"desc": "SimpleX stores all user data on client devices in a portable database format. The messages are held temporarily on SimpleX relay servers until they are received, then they are permanently deleted.",
"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 how it improves privacy",
"showImage": true,
"paras": [
"SimpleX stores all user data on client devices in a portable database format. The messages are held temporarily on SimpleX relay servers until they are received, then they are permanently deleted."
]
}
},
{
"id": 4,
"title": "Fully decentralised – users own the SimpleX network",
"desc": "You can use SimpleX with your own servers and still communicate with people using the servers that are pre-configured in the apps or any other SimpleX servers. The SimpleX network is independent of any crypto currency or any other platform, other than the Internet.",
"imgLight": "/img/new/unique-section-4.png",
"imgDark": "/img/new/unique-section-4-dark.png"
}
]
}

4
website/src/_includes/components/macro.njk
View File

@ -1,8 +1,8 @@
{% 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 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 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>
<h1 class="text-3xl font-bold text-active-blue mb-6">{{ section.overlayContent.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">

119
website/src/_includes/sections/simplex_unique.html
View File

@ -4,8 +4,10 @@
<div class="swiper unique-swiper px-4 py-2">
<div class="swiper-wrapper mb-16">
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
<a href="javascript:void(0);" class="flex items-center gap-2 md:hidden">
{% for section in why_simplex_is_unique.sections %}
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient relative scale-100 simplex-unique-card">
<a href="javascript:void(0);" class="flex items-center gap-2 md:hidden open-card-btn fixed z-10">
<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">
@ -13,107 +15,36 @@
</svg>
</span>
</a>
<div class="pt-14 md:pt-0">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#1</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 mb-[30px] text-grey-black dark:text-white">
Complete privacy of your identity, profile, contacts and metadata
</p>
<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 hidden md:block">
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.
</p>
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
</div>
<div class="flex-1 flex items-center justify-center w-full">
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-1.png" alt="">
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-1-dark.png" alt="">
</div>
</div>
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
<a href="javascript:void(0);" class="flex items-center gap-2 md:hidden">
<span class="underline text-[16px] tracking-[0.02em] underline-offset-4 text-primary-light dark:text-primary-dark">More info</span>
<a href="javascript:void(0);" class="items-center gap-2 md:hidden 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="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 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 class="pt-14 md:pt-0">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#2</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 mb-[30px] text-grey-black dark:text-white">
The best protection against spam and abuse
</p>
<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 hidden md:block">
Because you have no identifier on the SimpleX platform, you cannot be contacted unless you share a one-time “burner” or temporary user address.
</p>
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
{# hover:absolute hover:w-full hover:h-full hover:bg-primary-bg-light hover:dark:bg-primary-bg-dark hover:p-[inherit] #}
<div class="pt-14 md:pt-0 card-content pb-[60px]">
<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 }}</p>
</div>
<div class="flex-1 flex items-center justify-center w-full">
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-2.png" alt="">
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-2-dark.png" alt="">
<div class="content-body hidden md:block">
<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 }}</p>
{% 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="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
<a href="javascript:void(0);" class="flex items-center gap-2 md:hidden">
<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>
<div class="pt-14 md:pt-0">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#3</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 mb-[30px] text-grey-black dark:text-white">
Ownership, control and security of your data
</p>
<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 hidden md:block">
SimpleX stores all user data on client devices in a portable database format. The messages are held temporarily on SimpleX relay servers until they are received, then they are permanently deleted.
</p>
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
</div>
<div class="flex-1 flex items-center justify-center w-full">
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-3.png" alt="">
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-3-dark.png" alt="">
</div>
</div>
<div class="swiper-slide flex items-center md:items-start flex-col-reverse xl:flex-row xl:items-center px-4 md:px-10 lg:px-[50px] py-12 lg:py-[70px] rounded-[12px] shadow-[0px_3px_12px_rgba(0,0,0,0.2)] dark:shadow-none border-gradient">
<a href="javascript:void(0);" class="flex items-center gap-2 md:hidden">
<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>
<div class="pt-14 md:pt-0">
<p class="text-[35px] lg:text-[65px] font-bold tracking-[0.06em] text-active-blue text-center md:text-left">#4</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 mb-[30px] text-grey-black dark:text-white">
Fully decentralised – users own the SimpleX network
</p>
<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 hidden md:block">
You can use SimpleX with your own servers and still communicate with people using the servers that are pre-configured in the apps or any other SimpleX servers. The SimpleX network is independent of any crypto currency or any other platform, other than the Internet
</p>
<a href="" class="underline text-primary-light dark:text-primary-dark lg:block text-[16px] underline-offset-4 tracking-[0.02em] hidden md:block">Learn how it improves privacy</a>
</div>
<div class="flex-1 flex items-center justify-center w-full">
<img class="w-full max-w-[400px] dark:hidden" src="/img/new/unique-section-4.png" alt="">
<img class="w-full max-w-[400px] hidden dark:block" src="/img/new/unique-section-4-dark.png" alt="">
<div class="flex-1 flex items-center justify-center 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>
{% endfor %}
</div>
@ -127,3 +58,9 @@
</div>
</div>
</section>
{% for section in why_simplex_is_unique.sections %}
{% if section.overlayContent %}
{{ overlay(section) }}
{% endif %}
{% endfor %}

20
website/src/css/style.css
View File

@ -338,3 +338,23 @@ header nav {
.card:not(.no-hover):hover > div:nth-child(2) > *:nth-child(3){
opacity: 0;
}
/* simplex unique */
/* 268 -> 660 */
/* .card-content{
transition: all .5s ease;
height: 268px;
}
.simplex-unique-card{
transition: all .5s ease;
}
.card-content:hover {
max-height: 660px;
transition: all .5s ease;
}
.card-image{
transition: all .5s ease;
} */

4
website/src/index.html
View File

@ -8,7 +8,7 @@ title: "SimpleX Chat"
<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="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-[20px] mb-[90px]">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[20px] mb-[90px]">
{% 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">
@ -18,7 +18,7 @@ title: "SimpleX Chat"
<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>
<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-2 mb-[53px]">{{ section.overlayContent.linkText }}</a>
{{ overlay(section) }}
{% endif %}
</div>