organicmaps/website
13
Fork 1
Code Issues 31 Pull requests 8 Projects Releases Wiki Activity Actions

dis fix 2

Browse source
This commit is contained in:
borntojesus 2024-01-11 16:19:43 +02:00
parent d342209e59
commit 082f52c1f6
21 changed files with 342 additions and 1001 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
content/faq/hero_image.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 604 KiB

After

Width:  |  Height:  |  Size: 172 KiB

32
content/faq/index.md
View file

@ -7,26 +7,14 @@ extra:
hero_title: Faq
hero_image: /faq/hero_image.png
menu_title_pre: Home
faq_question_title_1: About Organic Maps
faq_question_title_2: App
faq_question_title_3: Operating The Map
faq_question_title_4: Route Planning & Routing
faq_question_title_5: Bookmarks, Points, Tracks
faq_question_title_6: Map Data
faq_question_title_7: GPS
faq_question_title_8: Features
faq_question_title_9: Text-To-Speach (TTS)
faq_question_title_10: Troubleshooting
faq_question_title_11: Community Collaboration
faq_question_app_q_1: How to edit or move bookmarks?
faq_question_app_q_2: How to remove bookmark or track?
faq_question_app_q_3: How to import multiple bookmarks on Android?
faq_question_app_q_4: Hot to import GPX track on Android and iOS?
faq_answer_app_q_1_1: To edit a bookmark use longtap menu or hit "Edit bookmark" when bookmark is selected on map.
faq_answer_app_q_1_2: You can change bookmark name, description, color, and folder. Don't forget to tap "Save".
faq_answer_app_q_2_1: On Android you can remove bookmark from from bookmarks list using longtap menu. On iOS":" "???"
faq_answer_app_q_3_1: Push "Import Bookmarks and tracks" button. Choose folder on your phone with KML/KMZ/GPX files. Organic Maps will scan picked folder and import all bookmarks and tracks.
faq_answer_app_q_4_1: If you received GPX file in email, messenger, or cloud drive you can import it directly to Organic Maps app.
faq_answer_app_q_4_2: On iOS tap on GPX file and press Share button":" Then select Organic Maps to open the file.
faq_answer_app_q_4_3: On Android tap on received GPX file to see Share menu. Select Organic Maps to import the file.
faq_question_title_1: General
faq_question_title_1_1: What is Telegram?
faq_question_title_1_2: Who is it for?
faq_question_title_1_3: How is it different from WhatsApp?
faq_question_title_1_4: How old is Telegram?
faq_question_title_1_5: Is it available on my device?
faq_question_title_1_6: Who are the people behind Telegram?
faq_question_title_2: Telegram Basics
faq_question_title_3: Groups and Channels
---

16
content/support/index.md
View file

@ -6,7 +6,7 @@ weight: 10
extra:
hero_title: Support
hero_description: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
support_card_title_1: FAQ
support_card_title_1: How can we help?
menu_title_pre: Home
hero_image: support/suport-kv.png
support_card_title_2: Email Contact
@ -14,5 +14,17 @@ extra:
support_card_description_1: This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content and make sure to add any relevant details or information that you want to share with your visitors.
support_card_description_2: This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content and make sure to add any relevant details or information that you want to share with your visitors.
support_card_description_3: This is a Paragraph. Click on "Edit Text" or double click on the text box to start editing the content and make sure to add any relevant details or information that you want to share with your visitors.
hero_buttons:
hero_button_1: About Organic Maps
hero_button_2: App
hero_button_3: Operating the Map
hero_button_4: Search
hero_button_5: Route Planning & Routing
hero_button_6: Bookmarks, Points, & Tracks
hero_button_7: Map Data
hero_button_8: GPS & Compass
hero_button_9: Features
hero_button_10: Text-To-Speech (TTS)
hero_button_11: Troubleshooting
hero_button_12: Community Collaboration
---

5
sass/common/header.scss
View file

@ -191,10 +191,11 @@
}
&--green {
animation: header-play 2.2s ease-in-out;
//animation: header-play 2.2s ease-in-out;
background-color: var(--common-green-primery);
transition: background-color 1s;
.header {
transition: background-color 1s;
&__logo {
transition: color var(--transition);
color: var(--common-green);

56
sass/common/section-social.scss Normal file
View file

@ -0,0 +1,56 @@
@import "../variables/media";
.section-social {
margin-bottom: var(--container-mob-section);
@media (max-width: $media-md) {
margin-bottom: 40rem;
}
&__row {
display: grid;
grid-template-columns: repeat(10, 1fr);
justify-content: center;
gap: 22rem;
@media (max-width: $media-md) {
gap: 6rem;
align-items: center;
grid-template-columns: repeat(5, 1fr);
}
}
&__title {
color: var(--black-white);
text-align: center;
margin-bottom: 24rem;
@media (max-width: $media-md) {
margin-bottom: 20rem;
}
}
&__item {
width: 59px;
height: 59px;
border: 2rem solid var(--black-white);
padding: 13rem;
border-radius: 6rem;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
svg {
color: var(--black-white);
}
a {
display: flex;
}
@media (max-width: $media-md) {
border: 1rem solid var(--black-white);
svg {
}
}
}
}

1
sass/main.scss
View file

@ -15,6 +15,7 @@
@import "./common/bred-crum";
@import "./common/support-block";
@import "./common/search";
@import "./common/section-social";
// Component Style
@import "./component/lang-switcher";

48
sass/pages/community.scss
View file

@ -61,55 +61,7 @@
}
}
.section-social {
margin-bottom: var(--container-mob-section);
&__row {
display: flex;
justify-content: center;
gap: 22rem;
@media (max-width: $media-md) {
gap: 6rem;
}
}
&__title {
color: var(--black-white);
text-align: center;
margin-bottom: 24rem;
@media (max-width: $media-md) {
margin-bottom: 20rem;
}
}
&__item {
width: 59px;
height: 59px;
border: 2rem solid var(--black-white);
padding: 13rem;
border-radius: 6rem;
display: flex;
align-items: center;
justify-content: center;
svg {
color: var(--black-white);
}
a {
display: flex;
}
@media (max-width: $media-md) {
width: 23px;
height: 23px;
svg {
width: 18px;
height: 18px;
}
}
}
}
.donate {
background-color: var(--bg-green);

38
sass/pages/faq-page.scss
View file

@ -4,3 +4,41 @@
padding-top: 0;
}
.faq-page-list {
&__title {
color: var(--black-white);
text-transform: uppercase;
margin-bottom: 20rem;
}
&__table {
border: 1rem solid var(--bg-green);
border-radius: 10rem;
margin-bottom: 20rem;
}
&__table-item {
padding: 30rem 20rem;
border-bottom: 1rem solid var(--bg-green);
&:last-child {
border-bottom: 1rem solid transparent;
}
@media (max-width: $media-md) {
padding: 20rem;
}
}
&__table-link {
color: var(--green-button);
}
}
.faq-page-footer {
padding-top: 40rem;
margin-bottom: 60rem;
&__title{
margin-bottom: 30rem;
text-align: center;
}
@media (max-width: $media-md) {
margin-bottom: 40rem;
}
}

37
sass/pages/home.scss
View file

@ -100,8 +100,11 @@ margin-bottom: 35rem;
}
}
&__title {
margin-bottom: var(--mb-16);
margin-bottom: 20rem;
color: var(--map-grey-text);
@media (max-width: $media-md) {
margin-bottom: var(--mb-16);
}
}
&__description {
color: var(--map-grey-text);
@ -116,8 +119,8 @@ margin-bottom: 35rem;
}
&:nth-child(1) {
width: 96rem;
left: calc(50% + 175rem);
top: calc(50% - 85rem);
left: calc(50% + 155rem);
top: calc(50% - 105rem);
@media (max-width: $media-md) {
width: calc(30rem + var(--icon-border));
left: calc(50% - -95rem);
@ -126,8 +129,8 @@ margin-bottom: 35rem;
}
&:nth-child(2) {
width: 72rem;
left: calc(50% + 285rem);
top: calc(50% - -45rem);
left: calc(50% + 245rem);
top: calc(50% + 35rem);
@media (max-width: $media-md) {
width: calc(22rem + var(--icon-border));
left: calc(50% - -135rem);
@ -136,8 +139,8 @@ margin-bottom: 35rem;
}
&:nth-child(3) {
width: 96rem;
left: calc(50% - 395rem);
top: calc(50% + -86rem);
left: calc(50% - 335rem);
top: calc(50% - 106rem);
@media (max-width: $media-md) {
width: calc(30rem + var(--icon-border));
left: calc(50% - 125rem);
@ -146,8 +149,8 @@ margin-bottom: 35rem;
}
&:nth-child(4) {
width: 72rem;
left: calc(50% - 355rem);
top: calc(50% - -74rem);
left: calc(50% - 245rem);
top: calc(50% + 44rem);
@media (max-width: $media-md) {
width: calc(22rem + var(--icon-border));
left: calc(50% - 165rem);
@ -156,8 +159,8 @@ margin-bottom: 35rem;
}
&:nth-child(5) {
width: 80rem;
left: calc(50% - -375rem);
top: calc(50% + 153rem);
left: calc(50% + 335rem);
top: calc(50% + 143rem);
@media (max-width: $media-md) {
width: calc(25rem + var(--icon-border));
left: calc(50% - -89rem);
@ -167,8 +170,8 @@ margin-bottom: 35rem;
}
&:nth-child(6) {
width: 64rem;
left: calc(50% + 305rem);
top: calc(50% + -217rem);
left: calc(50% + 275rem);
top: calc(50% - 187rem);
@media (max-width: $media-md) {
width: calc(20rem + var(--icon-border));
left: calc(50% + 136rem);
@ -177,8 +180,8 @@ margin-bottom: 35rem;
}
&:nth-child(7) {
width: 80rem;
left: calc(50% + -275rem);
top: calc(50% + 223rem);
left: calc(50% - 205rem);
top: calc(50% + 203rem);
@media (max-width: $media-md) {
width: calc(25rem + var(--icon-border));
left: calc(50% - 117rem);
@ -187,8 +190,8 @@ margin-bottom: 35rem;
}
&:nth-child(8) {
width: 64rem;
left: calc(50% - 195rem);
top: calc(50% + -227rem);
left: calc(50% - 145rem);
top: calc(50% - 187rem);
@media (max-width: $media-md) {
width: calc(20rem + var(--icon-border));
left: calc(50% - 165rem);

42
sass/pages/support.scss
View file

@ -66,4 +66,46 @@
left: 17rem;
}
}
}
.support-search {
padding: 60rem 16rem 20rem;
@media (max-width: $media-md) {
padding: 30rem 16rem;
}
&__row {
background-color: var(--bg-green);
border-radius: 24rem;
padding: 50rem 16rem;
display: flex;
flex-direction: column;
align-items: center;
.search {
width: 100%;
max-width: 910rem;
}
@media (max-width: $media-md) {
padding: 30rem 16rem;
}
}
&__title {
color: var(--black-white);
text-align: center;
}
}
.support-buttons {
padding: 30rem 0 80rem;
@media (max-width: $media-md) {
display: none;
}
&__row {
display: flex;
justify-content: center;
gap: 10rem;
flex-wrap: wrap;
}
}

1
sass/pages/volunteering.scss
View file

@ -89,6 +89,7 @@
border-radius: 34rem;
&:before {
content: "+";
transform: translateY(-1px);
}
}

8
sass/variables/fonts.scss
View file

@ -6,13 +6,14 @@
--sub-fonst: 'Lato', sans-serif;
--h1: 300 48rem/60rem var(--sub-fonst);
--h2-inter: 700 28rem/normal var(--main-font);
--h1-inter: 700 36rem/46rem var(--main-font);
--h1-sub: 400 24rem/32rem var(--main-font);
--h1-sub_v2: 500 24rem/32rem var(--main-font);
--h1-sub_v2: 200 24rem/32rem var(--main-font);
--h3-boold: 700 24rem/32rem var(--main-font);
--h3-normal: 600 24rem/32rem var(--main-font);
--h4: 500 18rem/28rem var(--main-font);
--h5: 500 20rem/28rem var(--main-font);
--h5: 300 20rem/28rem var(--main-font);
--h6: 500 30rem/36rem var(--main-font);
--h6-bold: 700 30rem/36rem var(--main-font);
--h6-date: 700 30rem/36rem var(--main-font);
@ -67,6 +68,9 @@
font: var(--h1);
color: var(--black-white);
}
.h2-inter {
font: var( --h2-inter);
}
.h2-sub{
font: var(--h1-sub);
color: var(--black-white);

BIN
static/images/open-map/paul-green-3.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/images/open-map/paul-green-4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
static/images/open-map/unsplash-4.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 46 KiB

BIN
static/images/sections/map-m-1.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 256 KiB

After

Width:  |  Height:  |  Size: 62 KiB

12
templates/community.html
View file

@ -153,17 +153,7 @@
<h2 class="h1-inter section-social__title">
{{ page.extra.stay_connected_section_title | safe }}
</h2>
<ul class="container section-social__row">
<li class="section-social__item">{% include 'ui/icons/social/instagram.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/telegram.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/linkidin.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/facebook.html' %}</li>
<li class="section-social__item"> {% include 'ui/icons/social/frame.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/mail.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/matrix.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/reddid.html' %}</li>
<li class="section-social__item">{% include 'ui/icons/social/git.html' %}</li>
</ul>
{% include 'section/social-icon.html' %}
</section>
{% include 'section/solo-donate.html' %}
{%- endblock content %}

952
templates/faq.html
View file

@ -38,882 +38,90 @@
</label>
</div>
</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">
{{ page.extra.faq_question_title_1| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_2| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_3| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_4| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_5| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_6| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_7| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_8| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_9| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_10| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
<div class="section-volunteering__item">
<div class="section-volunteering__select">
<h2 class="h5-boold section-volunteering__title">
{{ page.extra.faq_question_title_11| safe }}
</h2>
<div class="section-volunteering__button">
<span class="section-volunteering__symbol">+</span>
</div>
</div>
<div class="section-volunteering__content">
<div class="section-volunteering__block">
<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">
</div>
</div>
</div>
-->
</div>
</section>
<section class="faq-page-list">
<div class="container faq-page-list__row">
<h2 class="h2-inter faq-page-list__title">{{ page.extra.hero_title | safe }}</h2>
<div class="faq-page-list__table">
<div class="faq-page-list__table-item">
<h3 class="h5-boold faq-page-list__table-title">{{ page.extra.faq_question_title_1 | safe }}</h3>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_1 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_2 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_3 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_4 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_5 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_6 | safe }}</a>
</div>
</div>
<div class="faq-page-list__table">
<div class="faq-page-list__table-item">
<h3 class="h5-boold faq-page-list__table-title">{{ page.extra.faq_question_title_2 | safe }}</h3>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_1 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_2 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_3 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_4 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_5 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_6 | safe }}</a>
</div>
</div>
<div class="faq-page-list__table">
<div class="faq-page-list__table-item">
<h3 class="h5-boold faq-page-list__table-title">{{ page.extra.faq_question_title_3 | safe }}</h3>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_1 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_2 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_3 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_4 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_5 | safe }}</a>
</div>
<div class="faq-page-list__table-item">
<a class="h5 faq-page-list__table-link" href="#">{{ page.extra.faq_question_title_1_6 | safe }}</a>
</div>
</div>
</div>
</section>
<section class="faq-page-footer">
<div class="container faq-page-footer__row">
<h2 class="h2-inter faq-page-footer__title">Need more help? Contact us directly:</h2>
</div>
{% include 'section/social-icon.html' %}
</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 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)
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 %}

2
templates/section/open_map.html
View file

@ -11,7 +11,9 @@
<img class="open-map__icon" src="/images/open-map/unsplash-1.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/unsplash-2.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/unsplash-3.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/unsplash-4.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/paul-green-1.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/paul-green-2.png" width="50" alt="img">
<img class="open-map__icon" src="/images/open-map/paul-green-3.png" width="50" alt="img">

12
templates/section/social-icon.html Normal file
View file

@ -0,0 +1,12 @@
<ul class="container section-social__row">
<li class="section-social__item">{% include 'ui/icons/social/instagram.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/twitter.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/telegram.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/linkidin.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/facebook.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/frame.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/mail.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/matrix.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/reddid.html' %} </li>
<li class="section-social__item">{% include 'ui/icons/social/git.html' %} </li>
</ul>

81
templates/support.html
View file

@ -33,34 +33,65 @@
</div>
</section>
<section class="section-support">
<div class="container section-support__container">
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_1 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_1 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/email-card-banner.png" alt="img">
</div>
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_2 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_2 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/faq-card-banner.png" alt="img">
</div>
<div class="section-support__item">
<div class="section-support__content">
<h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_3 | safe }}</h2>
<div class="section-support__line"></div>
<p class="p-sm section-support__description">{{ page.extra.support_card_description_3 | safe }}</p>
</div>
<img class="section-support__img" src="/images/support/support-channel-banner.png" alt="img">
<!-- <section class="section-support">-->
<!-- <div class="container section-support__container">-->
<!-- <div class="section-support__item">-->
<!-- <div class="section-support__content">-->
<!-- <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_1 | safe }}</h2>-->
<!-- <div class="section-support__line"></div>-->
<!-- <p class="p-sm section-support__description">{{ page.extra.support_card_description_1 | safe }}</p>-->
<!-- </div>-->
<!-- <img class="section-support__img" src="/images/support/email-card-banner.png" alt="img">-->
<!-- </div>-->
<!-- <div class="section-support__item">-->
<!-- <div class="section-support__content">-->
<!-- <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_2 | safe }}</h2>-->
<!-- <div class="section-support__line"></div>-->
<!-- <p class="p-sm section-support__description">{{ page.extra.support_card_description_2 | safe }}</p>-->
<!-- </div>-->
<!-- <img class="section-support__img" src="/images/support/faq-card-banner.png" alt="img">-->
<!-- </div>-->
<!-- <div class="section-support__item">-->
<!-- <div class="section-support__content">-->
<!-- <h2 class="h3-normal section-support__title">{{ page.extra.support_card_title_3 | safe }}</h2>-->
<!-- <div class="section-support__line"></div>-->
<!-- <p class="p-sm section-support__description">{{ page.extra.support_card_description_3 | safe }}</p>-->
<!-- </div>-->
<!-- <img class="section-support__img" src="/images/support/support-channel-banner.png" alt="img">-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<section class="support-search">
<div class="container support-search__row">
<h2 class="h2-sub_v2 support-search__title">{{ page.extra.support_card_title_1 | safe }}</h2>
<div class="search">
<label class="search__label" for="inpSearch">
{% include 'ui/search.html' %}
<input class="search__input" id="inpSearch" type="text" placeholder="Describe the issue">
</label>
</div>
</div>
</section>
<section class="support-buttons">
<div class="container support-buttons__row">
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_1 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_2 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_3 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_4 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_5 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_6 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_7 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_8 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_9 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_10 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_11 | safe }}</button>
<button class="button button--line">{{ page.extra.hero_buttons.hero_button_12 | safe }}</button>
</div>
</section>
<section class="section-social">
{% include 'section/social-icon.html' %}
</section>
{% include 'section/donate.html' %}