dandri/simplex-chat
1
0
Fork 0
mirror of https://github.com/simplex-chat/simplex-chat.git synced 2026-05-25 02:05:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

website: add support for overlay hash in URL (#1974)

Browse Source 
* website: add support for overlay hash in URL

* website: update the overlay hashes

* website: fix the ui of donate button in join simplex section

* website: make the text selectable of unique & explained swiper

* scroll to popup context

---------

Co-authored-by: Evgeny Poberezkin <2769109+epoberezkin@users.noreply.github.com>
This commit is contained in:
M Sarmad Qadeer
2023-03-07 03:25:54 +05:00
committed by GitHub
parent c0105d135c
commit f5670c39da
8 changed files with 77 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/_data/hero_overlays.json
+5 -3
View File
@@ -5,7 +5,8 @@
"imgLight": "/img/new/explained-2.svg",
"imgDark": "/img/new/explained-2.svg",
"overlayContent": {
"overlayId": "hero-overlay-1",
"overlayId": "how-simplex-works",
"overlayScrollTo": "",
"title": "hero-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/hero/card_1.html"
@@ -16,11 +17,12 @@
"imgLight": "/img/new/explained-1.svg",
"imgDark": "/img/new/explained-1.svg",
"overlayContent": {
"overlayId": "hero-overlay-2",
"overlayId": "why-ids-bad-for-privacy",
"overlayScrollTo": "",
"title": "hero-overlay-2-title",
"showImage": true,
"contentBody": "overlay_content/hero/card_2.html"
}
}
]
}
}
website/src/_data/simplex_network_overlay.json
+3 -2
View File
@@ -5,11 +5,12 @@
"imgLight": "/img/new/network-1.svg",
"imgDark": "/img/new/network-1-dark.svg",
"overlayContent": {
"overlayId": "simplex-network-overlay-1",
"overlayId": "comparison-with-p2p-protocols",
"overlayScrollTo": "network",
"title": "simplex-network-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/simplex_network/card_1.html"
}
}
]
}
}
website/src/_data/why_privacy_matters.json
+7 -4
View File
@@ -6,7 +6,8 @@
"imgLight": "/img/new/privacy-section-1.svg",
"imgDark": "/img/new/privacy-section-1.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-1",
"overlayId": "privacy-saves-money",
"overlayScrollTo": "why-privacy",
"title": "privacy-matters-1-overlay-1-title",
"linkText": "privacy-matters-1-overlay-1-linkText",
"showImage": false,
@@ -19,7 +20,8 @@
"imgLight": "/img/new/privacy-section-2.svg",
"imgDark": "/img/new/privacy-section-2.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-2",
"overlayId": "privacy-gives-power",
"overlayScrollTo": "why-privacy",
"title": "privacy-matters-2-overlay-1-title",
"linkText": "privacy-matters-2-overlay-1-linkText",
"showImage": false,
@@ -32,7 +34,8 @@
"imgLight": "/img/new/privacy-section-3.svg",
"imgDark": "/img/new/privacy-section-3.svg",
"overlayContent": {
"overlayId": "why-privacy-matters-3",
"overlayId": "privacy-protects-freedom",
"overlayScrollTo": "why-privacy",
"title": "privacy-matters-3-overlay-1-title",
"linkText": "privacy-matters-3-overlay-1-linkText",
"showImage": false,
@@ -40,4 +43,4 @@
}
}
]
}
}
website/src/_data/why_simplex_is_unique.json
+9 -5
View File
@@ -7,7 +7,8 @@
"imgLight": "/img/new/unique-section-1.png",
"imgDark": "/img/new/unique-section-1-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-1",
"overlayId": "privacy-of-identity-contacts-metadata",
"overlayScrollTo": "why-simplex",
"title": "simplex-unique-1-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_1.html"
@@ -20,7 +21,8 @@
"imgLight": "/img/new/unique-section-2.png",
"imgDark": "/img/new/unique-section-2-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-2",
"overlayId": "protection-from-spam-and-abuse",
"overlayScrollTo": "why-simplex",
"title": "simplex-unique-2-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_2.html"
@@ -33,7 +35,8 @@
"imgLight": "/img/new/unique-section-3.png",
"imgDark": "/img/new/unique-section-3-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-3",
"overlayId": "you-control-your-data",
"overlayScrollTo": "why-simplex",
"title": "simplex-unique-3-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_3.html"
@@ -46,11 +49,12 @@
"imgLight": "/img/new/unique-section-4.png",
"imgDark": "/img/new/unique-section-4-dark.png",
"overlayContent": {
"overlayId": "why-simplex-is-unique-4",
"overlayId": "you-own-simplex-network",
"overlayScrollTo": "why-simplex",
"title": "simplex-unique-4-overlay-1-title",
"showImage": true,
"contentBody": "overlay_content/why_simplex_is_unique/card_4.html"
}
}
]
}
}
website/src/_includes/components/macro.njk
+1 -1
View File
@@ -1,6 +1,6 @@
{% macro overlay(section, lang='en') %}
{# 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 id="{{ section.overlayContent.overlayId }}" data-scroll-to="{{ section.overlayContent.overlayScrollTo }}" 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 {% if not section.overlayContent.showImage %}lg:max-w-[448px]{% endif %}">{{ section.overlayContent.title | i18n({}, lang ) | safe }}</h1>
<div class="flex flex-col-reverse lg:flex-row gap-10 justify-between">
website/src/_includes/sections/join_simplex.html
+1 -1
View File
@@ -7,7 +7,7 @@
<div class="flex flex-col items-center gap-5 self-stretch mb-12">
<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" | i18n({}, lang ) | safe }}</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" | i18n({}, lang ) | safe }}</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" | i18n({}, lang ) | safe }}</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:border-none bg-white dark:bg-[rgba(112,240,249,0.2)] border border-[#0053D0]">{{ "donate-here-to-help-us" | i18n({}, lang ) | safe }}</a>
</div>
<p class="text-grey-black dark:text-white text-base text-center mb-7">{{ "sign-up-to-receive-our-updates" | i18n({}, lang ) | safe }}</p>
website/src/index.html
+1 -1
View File
@@ -9,7 +9,7 @@ active_home: true
{% include "hero.html" %}
<section class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
<section id="why-privacy" class="bg-secondary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5 lg:h-[888px]">
<div class="container">
<p class="text-grey-black dark:text-white text-[35px] leading-[45px] md:leading-[55px] lg:text-[45px] text-center font-bold mb-4 md:mb-8">{{ "privacy-matters-section-header" | i18n({}, lang ) | safe }}</p>
<p class="text-center text-[18px] md:text-[20px] font-medium mb-7 md:mb-16 lg:mb-20 text-black dark:text-white">{{ "privacy-matters-section-subheader" | i18n({}, lang ) | safe }}</p>
website/src/js/script.js
+50 -15
View File
@@ -1,10 +1,18 @@
const uniqueSwiper = new Swiper('.unique-swiper', {
slidesPerView: 1,
spaceBetween: 80,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
allowTouchMove: true,
breakpoints: {
1400: {
allowTouchMove: false,
},
1200: {
allowTouchMove: true,
},
768: {
allowTouchMove: true,
}
},
direction: 'horizontal',
pagination: {
el: '.simplex-unique-swiper-pagination',
@@ -62,10 +70,18 @@ const privateSwiper = new Swiper('.private-swiper', {
const simplexExplainedSwiper = new Swiper(".simplex-explained-swiper", {
slidesPerView: 1,
spaceBetween: 80,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,
// },
allowTouchMove: true,
breakpoints: {
1400: {
allowTouchMove: false,
},
1200: {
allowTouchMove: true,
},
768: {
allowTouchMove: true,
}
},
direction: "horizontal",
pagination: {
el: ".simplex-explained-swiper-pagination",
@@ -73,10 +89,11 @@ const simplexExplainedSwiper = new Swiper(".simplex-explained-swiper", {
}
});
function closeOverlay (e) {
function closeOverlay(e) {
e.target.closest('.overlay').classList.remove('flex');
e.target.closest('.overlay').classList.add('hidden');
document.body.classList.remove('lock-scroll');
history.replaceState(null, null, ' ');
}
window.addEventListener('click', clickHandler)
@@ -105,14 +122,11 @@ function clickHandler(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');
window.location.hash = id;
}
// -----------------------------------------------
// ---------- For Contact & Invitation Page tabs
else if(e.target.closest('.contact-tab-btn')){
else if (e.target.closest('.contact-tab-btn')) {
e.target.closest('.contact-tab').classList.toggle('active')
}
}
@@ -121,7 +135,7 @@ window.addEventListener('load', () => {
const googlePlayBtn = document.querySelector('.google-play-btn');
const appleStoreBtn = document.querySelector('.apple-store-btn');
const fDroidBtn = document.querySelector('.f-droid-btn');
if(!googlePlayBtn || !appleStoreBtn || !fDroidBtn) return;
if (!googlePlayBtn || !appleStoreBtn || !fDroidBtn) return;
if (isMobile.Android()) {
@@ -137,3 +151,24 @@ window.addEventListener('load', () => {
fDroidBtn.classList.remove('hidden');
}
})
function openOverlay() {
let hash = window.location.hash
if (hash) {
const id = hash.split('#')[1];
const el = document.getElementById(id)
if (el.classList.contains('overlay')) {
const scrollTo = el.getAttribute('data-scroll-to')
if (scrollTo) {
const scrollToEl = document.getElementById(scrollTo)
if (scrollToEl) scrollToEl.scrollIntoView(true)
}
el.classList.remove('hidden')
el.classList.add('flex')
document.body.classList.add('lock-scroll')
}
}
}
window.addEventListener('load', openOverlay);
window.addEventListener('hashchange', openOverlay);