0.0.148 add faq on main page

This commit is contained in:
2023-09-21 17:50:58 +03:00
parent 54105c47f0
commit 5ae0e75a96
8 changed files with 345 additions and 125 deletions

View File

@@ -2069,6 +2069,13 @@ button#send_feedback_form{
top: 1px; top: 1px;
padding: 10px; padding: 10px;
border-radius: 10px; border-radius: 10px;
margin-bottom: 30px;
}
.tabs>div>#title_static{
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 36px;
} }
.tabs>label:not(:first-of-type) { .tabs>label:not(:first-of-type) {
@@ -2090,6 +2097,220 @@ button#send_feedback_form{
/*tabs_on_main_page*/ /*tabs_on_main_page*/
.pre_bottom_block_static{
width: 90%;
margin: auto;
}
.cards_wrapper{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.cards_item_1{
width: 630px;
height: 322px;
border-radius: 10px;
background: #272424;
/* Shadow 1 */
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
margin: 10px;
}
.cards_item_1_left,
.cards_item_2_left,
.cards_item_3_left,
.cards_item_4_left{
width: 55%;
float: left;
}
.cards_item_1_right{
float: right;
border-radius: 10px;
background: url(/static/img/png/cards_item_1.png), lightgray 0px -24.489px / 100.69% 113.347% no-repeat;
width: 279px;
height: 322px;
}
.cards_item_2{
width: 630px;
height: 322px;
border-radius: 10px;
background: #FFF;
/* Shadow 1 */
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
margin: 10px;
}
.cards_item_2_left>div,
.cards_item_3_left>div{
color: black;
}
.cards_item_2_right{
float: right;
border-radius: 10px;
background: url(/static/img/png/cards_item_2.png), lightgray 50% / cover no-repeat;
width: 279px;
height: 322px;
}
.card_gradient{
border-radius: 10px;
background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
width: 100px;
height: 322px;
}
.card_gradient_black{
border-radius: 10px;
background: linear-gradient(90deg, #272424 0%, rgba(39, 36, 36, 0.00) 100%);
width: 100px;
height: 322px;
}
.cards_item_3{
width: 630px;
height: 322px;
border-radius: 10px;
background: #FFF;
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
margin: 10px;
}
.cards_item_3_right{
float: right;
border-radius: 10px;
background: url(/static/img/png/cards_item_3.png), lightgray 50% / cover no-repeat;
width: 279px;
height: 322px;
}
.cards_item_4{
width: 630px;
height: 322px;
border-radius: 10px;
background: #272424;
/* Shadow 1 */
box-shadow: -1px 4px 10px 0px rgba(198, 199, 203, 0.20), 0px -1px 10px 0px rgba(198, 199, 203, 0.20);
margin: 10px;
}
.cards_item_4_right{
float: right;
border-radius: 10px;
background: url(/static/img/png/cards_item_4.png), lightgray 50% / cover no-repeat;
width: 279px;
height: 322px;
}
.card_title_1{
color: #FFF;
font-size: 44px;
font-style: normal;
font-weight: 700;
line-height: 52px; /* 118.182% */
margin: 104px 0 0 20px;
}
.card_title_2{
color: #FFF;
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 36px; /* 150% */
margin: 15px 0 0 20px;
}
.card_title_3{
color: #FFF;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 22px;
margin: 20px 0 0 20px;
width: 80%;
}
/*faq_main_page*/
.faq_main_page {
display: flex;
flex-direction: column;
align-items: center;
}
details{
display: block;
background: #fff;
width: 87%;
box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
border-radius: 8px;
overflow: hidden;
margin-bottom: 1.5rem;
margin-right: 22px;
}
summary::-webkit-details-marker{display:none;}
summary::-moz-list-bullet{list-style-type:none;}
summary::marker{display:none;}
summary {
display: block;
padding: 0.3em 1em 0.3em 0.9em;
font-size: 1.4em;
cursor: pointer;
position: relative;
margin: 10px 0 10px 0px;
}
summary:before {
top: .4em;
right: .3em;
color: transparent;
background: url(/static/img/svg/icon_cross.svg) no-repeat 50% 50% / 1em 1em;
width: 1em;
height: 1em;
content: "";
position: absolute;
transition: transform .5s;
}
details[open] > summary:before {
transform: scale(1,-1);
}
summary ~ * {
padding: 0 1em 10px 1.4em;
}
details[open] summary ~ *{
animation: sweep .5s ease-in-out;
}
@keyframes sweep {
0% {opacity: 0;}
100% {opacity: 1;}
}
summary:focus {
outline:0;
box-shadow: inset 0 0 1px rgba(0,0,0,0.3), inset 0 0 2px rgba(0,0,0,0.3);
}
/*END faq_main_page*/
/*end_static_pages*/ /*end_static_pages*/

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

View File

@@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.89474 14.2105H14.2105V7.89474H15.7895V14.2105H22.1053V15.7895H15.7895V22.1053H14.2105V15.7895H7.89474V14.2105ZM15 0C18.9782 0 22.7936 1.58035 25.6066 4.3934C28.4196 7.20644 30 11.0218 30 15C30 18.9782 28.4196 22.7936 25.6066 25.6066C22.7936 28.4196 18.9782 30 15 30C11.0218 30 7.20644 28.4196 4.3934 25.6066C1.58035 22.7936 0 18.9782 0 15C0 11.0218 1.58035 7.20644 4.3934 4.3934C7.20644 1.58035 11.0218 0 15 0ZM15 1.57895C11.4405 1.57895 8.02682 2.99295 5.50988 5.50988C2.99295 8.02682 1.57895 11.4405 1.57895 15C1.57895 18.5595 2.99295 21.9732 5.50988 24.4901C8.02682 27.0071 11.4405 28.4211 15 28.4211C18.5595 28.4211 21.9732 27.0071 24.4901 24.4901C27.0071 21.9732 28.4211 18.5595 28.4211 15C28.4211 11.4405 27.0071 8.02682 24.4901 5.50988C21.9732 2.99295 18.5595 1.57895 15 1.57895Z" fill="#FF613A"/>
</svg>

After

Width:  |  Height:  |  Size: 920 B

View File

@@ -0,0 +1,3 @@
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="icon cross" d="M10.5341 9.41765L15 13.8836L19.4659 9.41765L20.5824 10.5341L16.1165 15.0001L20.5824 19.466L19.4659 20.5825L15 16.1166L10.5341 20.5825L9.41758 19.466L13.8835 15.0001L9.41758 10.5341L10.5341 9.41765ZM25.6066 4.39347C28.4196 7.20651 30 11.0218 30 15.0001C30 18.9783 28.4196 22.7936 25.6066 25.6067C22.7936 28.4197 18.9782 30.0001 15 30.0001C11.0218 30.0001 7.20644 28.4197 4.3934 25.6067C1.58035 22.7936 5.97722e-07 18.9783 2.60547e-07 15.0001C9.19596e-08 11.0218 1.58035 7.20651 4.3934 4.39347C7.20644 1.58042 11.0218 6.87361e-05 15 6.85675e-05C18.9782 6.87361e-05 22.7936 1.58042 25.6066 4.39347ZM24.4901 5.50995C21.9732 2.99302 18.5595 1.57902 15 1.57902C11.4405 1.57902 8.02682 2.99302 5.50988 5.50995C2.99295 8.02689 1.57895 11.4406 1.57895 15.0001C1.57895 18.5596 2.99295 21.9733 5.50988 24.4902C8.02682 27.0071 11.4405 28.4211 15 28.4211C18.5595 28.4211 21.9732 27.0071 24.4901 24.4902C27.0071 21.9733 28.4211 18.5596 28.4211 15.0001C28.4211 11.4406 27.0071 8.02689 24.4901 5.50995Z" fill="#FF613A"/>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -12,12 +12,12 @@
<div class="top_block_static"> <div class="top_block_static">
<div class="title_static_wrapper"> <div class="title_static_wrapper">
<h2 id=title_static>{% translate "Отправляй" %}</h2> <h2 id=title_static>{% translate "Отправляй" %}</h2>
<span class="color_title">{% translate "посылку" %}</span> <span class="color_title">{% translate "посылку" %}</span>
<h2 id=title_static>{% translate "в любую точку мира" %}</h2> <h2 id=title_static>{% translate "в любую точку мира" %}</h2>
<h2 id=title_static>!</h2> <h2 id=title_static>!</h2>
</div> </div>
<span id="sub_title_static"> <span id="sub_title_static">
<p> <p>
{% translate "Сервис, который позволяет передавать посылки с путешественниками" %} {% translate "Сервис, который позволяет передавать посылки с путешественниками" %}
@@ -25,34 +25,31 @@
</p> </p>
</span> </span>
<div class="wrapper_switch"> <div class="wrapper_switch">
<div class="switch"> <div class="switch">
<div class="form_radio_btn"> <div class="form_radio_btn">
<input class="{% if account_type == "mover" %}active {% else %} deactive{% endif %}" id="radio-1" type="radio" name="account_type" value="mover" > <input class="{% if account_type == "mover" %}active {% else %} deactive{% endif %}" id="radio-1" type="radio" name="account_type" value="mover" >
<label for="radio-1">{% translate "Автоперевозки" %}</label> <label for="radio-1">{% translate "Автоперевозки" %}</label>
</div> </div>
<div class="form_radio_btn"> <div class="form_radio_btn">
<input class="{% if account_type == "sender" %}active {% else %} deactive{% endif %}" id="radio-2" type="radio" name="account_type" value="sender" checked> <input class="{% if account_type == "sender" %}active {% else %} deactive{% endif %}" id="radio-2" type="radio" name="account_type" value="sender" checked>
<label for="radio-2">{% translate "Авиаперевозки" %}</label> <label for="radio-2">{% translate "Авиаперевозки" %}</label>
</div>
</div> </div>
</div> </div>
<img src="/static/img/png/Box1.png" alt="">
<img src="/static/img/png/Box2.png" alt="">
<img src="/static/img/png/Box3.png" alt="">
<img src="/static/img/png/Box4.png" alt="">
</div> </div>
<img src="/static/img/png/Box1.png" alt="">
<img src="/static/img/png/Box2.png" alt="">
<img src="/static/img/png/Box3.png" alt="">
<img src="/static/img/png/Box4.png" alt="">
</div>
<div class="search_form_main"> <div class="search_form_main">
<div class="cut-width"> <div class="cut-width">
{% include "blocks/b_find_route_form.html" %} {% include "blocks/b_find_route_form.html" %}
</div> </div>
</div> </div>
<div class="mid_block_static"> <div class="mid_block_static">
@@ -77,49 +74,52 @@
<div id="content-1"> <div id="content-1">
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2> <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
<div class="benefit_img"> <div class="benefit_img">
<div class="benefit_img_item"> <div class="benefit_img_item">
<img src="/static/img/svg/Find_carrier.svg" alt=""> <img src="/static/img/svg/Find_carrier.svg" alt="">
</div> </div>
<img src="/static/img/svg/Arrow_direction.svg" alt=""> <img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item"> <div class="benefit_img_item">
<img src="/static/img/svg/Contact_carrier.svg" alt=""> <img src="/static/img/svg/Contact_carrier.svg" alt="">
</div> </div>
<img src="/static/img/svg/Arrow_direction.svg" alt=""> <img src="/static/img/svg/Arrow_direction.svg" alt="">
<div class="benefit_img_item"> <div class="benefit_img_item">
<img src="/static/img/svg/Pass_package.svg" alt=""> <img src="/static/img/svg/Pass_package.svg" alt="">
</div> </div>
</div>
<div class="benefit_title">
<div class="benefit_title_item">
<h3>{% translate "Найдите перевозчика" %}</h3>
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
</div> </div>
<div class="benefit_title_item"> <div class="benefit_title">
<h3>{% translate "Передайте посылку" %}</h3> <div class="benefit_title_item">
<span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span> <h3>{% translate "Найдите перевозчика" %}</h3>
<span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
<span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
</div>
<div class="benefit_title_item">
<h3>{% translate "Передайте посылку" %}</h3>
<span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
</div>
</div> </div>
<div class="button_container">
</div> <button id="more_button">{% translate "Отправить посылку" %}</button>
</div>
</div> </div>
<div id="content-2"> <div id="content-2">
<h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2> <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
@@ -173,93 +173,86 @@
</div> </div>
</div> </div>
<div class="button_container">
<button id="more_button">{% translate "Перевезти посылку" %}</button>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="pre_bottom_block_static">
<h2 id=title_static>{% translate "Trip With Bonus это комфорт и эффективность!" %}</h2>
<div class="cards_wrapper">
<div class="button_container"> <div class="cards_item_1">
{% if page.url == 'for_customers' %} <div class="cards_item_1_left">
<button id="more_button">{% translate "Отправить посылку" %}</button> <div class="card_title_1">{% translate "+5%" %}</div>
{% endif %} <div class="card_title_2">{% translate "рост путешествий ежегодно" %}</div>
{% if page.url == 'for_movers' %} <div class="card_title_3">{% translate "В среднем на 5% растёт количество путешествий ежегодно. Просто путешествуй и получай бонусы." %}</div>
<button id="more_button">{% translate "Перевезти посылку" %}</button>
{% endif %}
</div>
<div class="subscribes_container">
<h2 id=title_static>{% translate "Тарифы" %}</h2>
<div class="type_of_subscribes">
{% for subscribe in subscribes %}
<div class="container_subscribe light" style="background: {{ subscribe.bg_color }}">
<div class="first-decr-subscribe">
<div style="color: {{ subscribe.text_color }}">
{{ subscribe.name }}
</div>
<div class="price_subscribe">
{% if subscribe.price %}
{{ subscribe.price|floatformat }}$
{% else %}
Бесплатно
{% endif %}
</div>
<div class="periud_subscribe" style="color: {{ subscribe.text_color }}">
Период: {{ subscribe.period_name }}
</div>
</div> </div>
<div class="options_subscribe"> <div class="cards_item_1_right"></div>
<div class="options_subscribe_title light" style="color: {{ subscribe.text_color }}"> </div>
Опции: <div class="cards_item_2">
</div> <div class="cards_item_2_left">
<div class="list_options_subscribe"> <div class="card_title_1">{% translate "в 3 раза" %}</div>
<ul class="option_list"> <div class="card_title_2">{% translate "быстрее других сервисов" %}</div>
{% for opt in subscribe.options.all %} <div class="card_title_3">{% translate "Почтовые сервисы доставляет посылки в среднем за 10 дней. С нами - быстрее!" %}</div>
<li class="items_subscribe select" style="color: {{ subscribe.text_color }}"><text>{{ opt.name }}</text></li>
{% endfor %}
{% for opt_dis in subscribe.disabled_options %}
<li class="items_subscribe unselect"><text>{{ opt_dis.name }}</text></li>
{% endfor %}
</ul>
</div>
</div> </div>
<div class="text-align-center"> <div class="cards_item_2_right">
<button onclick="send_subscribe({{ subscribe.id }})" class="arrange_subscribe">Оформить подписку</button> <div class="card_gradient"></div>
</div> </div>
</div> </div>
{% endfor %} <div class="cards_item_3">
</div> <div class="cards_item_3_left">
<div class="card_title_1">{% translate "+142" %}</div>
<div class="card_title_2">{% translate "заявки ежедневно" %}</div>
<div class="card_title_3">{% translate "На перевозку или отправку посылок в разные уголки мира" %}</div>
</div>
<div class="cards_item_3_right">
<div class="card_gradient"></div>
</div>
</div>
<div class="cards_item_4">
<div class="cards_item_4_left">
<div class="card_title_1">{% translate "30+" %}</div>
<div class="card_title_2">{% translate "стран" %}</div>
<div class="card_title_3">{% translate "С TWB отправляй посылки по всему миру! С нами нет границ!" %}</div>
</div>
<div class="cards_item_4_right">
<div class="card_gradient_black"></div>
</div>
</div>
</div>
</div> </div>
<div class="bottom_block_static"> <div class="faq_main_page">
<div class="title_static_wrapper"> <h2 id=title_static>{% translate "Частые вопросы" %}</h2>
<h2 id=title_static>{% translate "Оформи" %}</h2>
<span class="color_title">{% translate "подписку" %}</span>
<h2 id=title_static>{% translate "сейчас и получи" %}</h2>
</div>
<div class="title_static_wrapper"> <details open>
<span class="color_title">{% translate "1 день" %}</span> <summary>{% translate "Как пользоваться сервисом?" %}</summary>
<h2 id=title_static>{% translate "пользования сервисом" %}</h2> <p>Скандинавская мифология — мифология древних скандинавов, часть древнегерманской мифологии.</p>
<span class="color_title">{% translate "в подарок" %}</span> </details>
<h2 id=title_static>!</h2> <details>
</div> <summary>{% translate "Как разместить объявление о посылке/перевозке?" %}</summary>
<p><b>Скандинавская мифология</b> — мифология древних скандинавов, часть древнегерманской мифологии.<br>
Основным источником сведений о ней являются тексты поэтической <b>«Старшей Эдды»</b> и прозаической <b>«Младшей Эдды» С. Стурлусона XII века н. э.</b><br>
Примерно в то же время датский хронист Саксон Грамматик в <b>«Деяниях датчан»</b> передаёт многие мифологические сюжеты. Ценные сведения о <br>древнегерманской мифологии имеются в <b>«Германии» Тацита</b>.</p>
</details>
<details>
<summary>{% translate "Как оплатить лицензию?" %}</summary>
<p>{% translate "Однозначно, явные признаки победы институционализации ограничены исключительно образом мышления. Следует отметить, что новая модель организационной деятельности обеспечивает широкому кругу (специалистов) участие в формировании как самодостаточных, так и внешне зависимых концептуальных решений. " %}</p>
</details>
</div>
<div class="news_block_static">
<h2 id=title_static>{% translate "Последние новости" %}</h2>
<div class="button_container">
<button id="more_button">{% translate "Получить" %}</button>
</div>
<img src="/static/img/png/Box5.png" alt="">
<img src="/static/img/png/Box4.png" alt="">
<img src="/static/img/png/Box4.png" alt="">
<img src="/static/img/png/Box6.png" alt="">
</div> </div>