From f5670c39da27be6a6775d4c0f02c24cbc17758a1 Mon Sep 17 00:00:00 2001
From: M Sarmad Qadeer <MSarmadQadeer@gmail.com>
Date: Tue, 7 Mar 2023 03:25:54 +0500
Subject: [PATCH] website: add support for overlay hash in URL (#1974)

* 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>
---
 website/src/_data/hero_overlays.json          |  8 ++-
 .../src/_data/simplex_network_overlay.json    |  5 +-
 website/src/_data/why_privacy_matters.json    | 11 ++--
 website/src/_data/why_simplex_is_unique.json  | 14 ++--
 website/src/_includes/components/macro.njk    |  2 +-
 .../src/_includes/sections/join_simplex.html  |  2 +-
 website/src/index.html                        |  2 +-
 website/src/js/script.js                      | 65 ++++++++++++++-----
 8 files changed, 77 insertions(+), 32 deletions(-)

diff --git a/website/src/_data/hero_overlays.json b/website/src/_data/hero_overlays.json
index f8d12427f6..d50ba0db68 100644
--- a/website/src/_data/hero_overlays.json
+++ b/website/src/_data/hero_overlays.json
@@ -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"
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/website/src/_data/simplex_network_overlay.json b/website/src/_data/simplex_network_overlay.json
index 8e3df75e07..ee86310ba0 100644
--- a/website/src/_data/simplex_network_overlay.json
+++ b/website/src/_data/simplex_network_overlay.json
@@ -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"
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/website/src/_data/why_privacy_matters.json b/website/src/_data/why_privacy_matters.json
index 7072cc010a..8f7305363b 100644
--- a/website/src/_data/why_privacy_matters.json
+++ b/website/src/_data/why_privacy_matters.json
@@ -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 @@
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/website/src/_data/why_simplex_is_unique.json b/website/src/_data/why_simplex_is_unique.json
index 601c7e95e3..2ee986abc0 100644
--- a/website/src/_data/why_simplex_is_unique.json
+++ b/website/src/_data/why_simplex_is_unique.json
@@ -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"
             }
         }
     ]
-}
+}
\ No newline at end of file
diff --git a/website/src/_includes/components/macro.njk b/website/src/_includes/components/macro.njk
index 1499486890..bfcbb6a435 100644
--- a/website/src/_includes/components/macro.njk
+++ b/website/src/_includes/components/macro.njk
@@ -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">
diff --git a/website/src/_includes/sections/join_simplex.html b/website/src/_includes/sections/join_simplex.html
index e8234a0d70..4d9177a604 100644
--- a/website/src/_includes/sections/join_simplex.html
+++ b/website/src/_includes/sections/join_simplex.html
@@ -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>
diff --git a/website/src/index.html b/website/src/index.html
index c5d83284e5..51d62263f2 100644
--- a/website/src/index.html
+++ b/website/src/index.html
@@ -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>
diff --git a/website/src/js/script.js b/website/src/js/script.js
index facc0c39ca..dc090203dc 100644
--- a/website/src/js/script.js
+++ b/website/src/js/script.js
@@ -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);