From 70e4062869ce128dbc184fe05251ad53471a036d Mon Sep 17 00:00:00 2001
From: borntojesus <borntojesus@gmail.com>
Date: Sat, 25 Nov 2023 09:46:20 +0200
Subject: [PATCH] add search

---
 sass/pages/volunteering.scss |  30 ++-
 templates/faq.html           | 488 +++++++++++++++++++++++++++++++++++
 2 files changed, 509 insertions(+), 9 deletions(-)

diff --git a/sass/pages/volunteering.scss b/sass/pages/volunteering.scss
index f2fab7a0..d5304266 100644
--- a/sass/pages/volunteering.scss
+++ b/sass/pages/volunteering.scss
@@ -9,6 +9,11 @@
       align-items: center;
     }
   }
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: 16rem;
+  }
 
   &__select {
     display: flex;
@@ -23,9 +28,7 @@
       padding: 16rem 15rem;
     }
 
-    &:last-child {
-      margin-bottom: 0;
-    }
+
   }
 
   &__block {
@@ -34,12 +37,16 @@
     flex-direction: column;
     gap: 16rem;
     border-bottom: 1rem solid var(--common-acord-button);
-     overflow: scroll;
-   max-height: 500rem;
+    overflow: scroll;
+    max-height: 500rem;
+    > div {
+       max-height: 500rem;
+    }
     img {
       display: inline;
-    width: fit-content;
+      width: fit-content;
     }
+
     @media (max-width: $media-sm) {
       padding: 16rem 15rem;
 
@@ -55,10 +62,10 @@
 
     background-color: var(--acordion-green-bg);
     transition: max-height 0.5s ease-in-out;
-    margin-bottom: 20rem;
+
     margin-top: -24rem;
     border-radius: 0 0 10rem 10rem;
-        max-height: 0;
+    max-height: 0;
 
     @media (max-width: $media-sm) {
       margin-top: -27rem;
@@ -80,7 +87,7 @@
   }
 
   .is-active {
-
+border-radius: 10rem;
     border: 1rem solid var(--common-acord-button);
     background-color: var(--acordion-green-bg);
   }
@@ -90,5 +97,10 @@
     border: 1rem solid var(--common-acord-button);
 
   }
+
+  .active-hei {
+    max-height: 500rem;
+    border: 1rem solid var(--common-acord-button);
+  }
 }
 
diff --git a/templates/faq.html b/templates/faq.html
index 16d827d8..0e9a2bce 100644
--- a/templates/faq.html
+++ b/templates/faq.html
@@ -40,6 +40,7 @@
     </section>
     <section class="faq-page section-volunteering">
         <div class="container section-volunteering__container">
+            <!--
             <div class="section-volunteering__item">
                 <div class="section-volunteering__select">
                     <h2 class="h5-boold  section-volunteering__title">
@@ -425,9 +426,496 @@
 
                 </div>
             </div>
+            -->
         </div>
 
     </section>
 
     {% include 'section/donate.html' %}
+
+
+
+
+    <script>
+
+
+        try {
+                    const faqArr = [
+            {
+                title: '{{ page.extra.faq_question_title_1| safe }}',
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_2| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_3| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_4| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_5| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_6| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_7| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_8| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_9| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_10| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+            {
+                title: `{{ page.extra.faq_question_title_11| safe }}`,
+                content: `
+
+                        <h2>{{ page.extra.faq_question_title_2| safe }}</h2>
+
+                        <h3> {{ page.extra.faq_question_app_q_1 | safe }} </h3>
+                        <img src="/images/faq/app-img-1.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_1 | safe }}</p>
+                        <img src="/images/faq/app-img-2.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_1_2 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_2 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_2_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_3 | safe }}</h3>
+                        <img src="/images/faq/app-img-3.png" alt="img">
+                        <p>{{ page.extra.faq_answer_app_q_3_1 | safe }}</p>
+
+                        <h3>{{ page.extra.faq_question_app_q_4 | safe }}</h3>
+                        <p>{{ page.extra.faq_answer_app_q_4_1 | safe }}</p>
+                        <p>{{ page.extra.faq_answer_app_q_4_2 | safe }}</p>
+                        <img src="/images/faq/app-img-4.png" alt="img">
+                        <img src="/images/faq/app-img-5.png" alt="img">
+
+
+                `,
+            },
+        ];
+            const searchInp = document.getElementById('inpSearch')
+            const searchOut = document.querySelector('.section-volunteering__container')
+
+            searchInp.addEventListener("keyup", search)
+
+            function search() {
+                searchOut.innerHTML = ''
+                faqArr.map((item, index) => {
+                    if (item.title.toLowerCase().includes(searchInp.value.toLowerCase())) {
+                        searchOut.append(searchItem(item))
+                    }
+                })
+            }
+
+            function searchItem(data) {
+                const div = document.createElement('div')
+                div.setAttribute('class', 'section-volunteering__item')
+
+                const select = document.createElement('div')
+                select.classList.add('section-volunteering__select')
+
+                select.onclick = () => {
+                    select.classList.toggle('is-active')
+                    content.classList.toggle('active-hei')
+                }
+
+                const h2Title = document.createElement('h2')
+                h2Title.setAttribute('class', 'h5-boold  section-volunteering__title')
+                h2Title.innerText = data.title;
+
+
+                const seBtn = document.createElement('div')
+                seBtn.classList.add('section-volunteering__button')
+
+                const symB = document.createElement('span')
+                symB.classList.add('section-volunteering__symbol')
+                symB.innerText = "+"
+
+                const content = document.createElement('div')
+                content.classList.add('section-volunteering__content')
+
+                const contentBlock = document.createElement('div')
+                contentBlock.classList.add('section-volunteering__block')
+
+                contentBlock.innerHTML = data.content
+
+
+                content.append(contentBlock)
+                seBtn.append(symB)
+
+                select.append(h2Title, seBtn)
+
+                div.append(select, content)
+
+                return div
+            }
+
+            function defRender() {
+                searchOut.innerHTML = ''
+                faqArr.map(item => {searchOut.append(searchItem(item))})
+            }
+            setTimeout(()=>{defRender()},400)
+        } catch (err) {
+            console.log(err)
+        }
+
+
+
+
+        /** const faqArr = [
+         {
+         title: 'About Organic Maps',
+         content: [
+         {
+         title: 'How to edit or move bookmarks?',
+         block: [
+         {
+         img: ['/images/faq/app-img-1.png'],
+         text: 'To edit a bookmark use longtap menu or hit "Edit bookmark" when bookmark is selected on map.',
+         },
+         {
+         img: ['/images/faq/app-img-1.png'],
+         text: `ou can change bookmark name, description, color, and folder. Don't forget to tap "Save".`,
+         }
+         ]
+
+         },
+         {
+         title: 'How to remove bookmark or track?',
+         description: [
+         {
+         title: ['Test1'],
+         text: ['On Android you can remove bookmark from from bookmarks list using longtap menu.On iOS: ???']
+         }
+         ]
+         },
+         {
+         title: 'Hot to import GPX track on Android and iOS?',
+         description: [
+         {
+         title: ['Test1'],
+         text: [
+         'If you received GPX file in email, messenger, or cloud drive you can import it directly to Organic Maps app.',
+         `<img src="test"> Then select Organic Maps to open the file.`
+         ]
+         }
+         ],
+         block: [
+         {
+         img: ['/images/faq/app-img-1.png', '/images/faq/app-img-2.png'],
+         text: 'On Android tap on received GPX file to see Share menu. Select Organic Maps to import the file.',
+         },
+
+         ]
+         }
+         ]
+         },
+         {
+         title: 'About Organic Maps 22',
+         content: [
+         {
+         title: 'How to edit or move bookmarks?',
+         block: [
+         {
+         img: ['/images/faq/app-img-1.png'],
+         text: 'To edit a bookmark use longtap menu or hit "Edit bookmark" when bookmark is selected on map.',
+         },
+         {
+         img: ['/images/faq/app-img-1.png'],
+         text: `ou can change bookmark name, description, color, and folder. Don't forget to tap "Save".`,
+         }
+         ]
+
+         },
+         {
+         title: 'How to remove bookmark or track?',
+         description: [
+         {
+         title: ['Test1'],
+         text: ['On Android you can remove bookmark from from bookmarks list using longtap menu.On iOS: ???']
+         }
+         ]
+         },
+         {
+         title: 'Hot to import GPX track on Android and iOS?',
+         description: [
+         {
+         title: ['Test2'],
+         text: [
+         'If you received GPX file in email, messenger, or cloud drive you can import it directly to Organic Maps app.',
+         `<img src="test"> Then select Organic Maps to open the file.`
+         ]
+         }
+         ],
+         block: [
+         {
+         img: ['/images/faq/app-img-1.png', '/images/faq/app-img-2.png'],
+         text: 'On Android tap on received GPX file to see Share menu. Select Organic Maps to import the file.',
+         },
+
+         ]
+         }
+         ]
+         },
+         ];
+         **/
+
+    </script>
 {%- endblock content %}
\ No newline at end of file