diff --git a/static/css/styles.css b/static/css/styles.css index 55c32bf..b850d9e 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -2027,6 +2027,69 @@ button#send_feedback_form{ padding-top: 40px; } + +/*tabs_on_main_page*/ + .tabs { + font-size: 0; + margin-left: auto; + margin-right: auto; + text-align: center; + } + + .tabs>input[type="radio"] { + display: none; + } + + .tabs>div + + { + /* скрыть контент по умолчанию */ + display: none; + font-size: 16px; + } + + /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */ + #tab-btn-1:checked~#content-1, + #tab-btn-2:checked~#content-2 + { + display: block; + } + + .tabs>label { + display: inline-block; + text-align: center; + vertical-align: middle; + user-select: none; + background-color: white; + font-size: 16px; + line-height: 1.5; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out; + cursor: pointer; + position: relative; + top: 1px; + padding: 10px; + border-radius: 10px; + } + + .tabs>label:not(:first-of-type) { + border-left: none; + } + + .tabs>input[type="radio"]:checked+label { + + border-radius: 10px; + background: #FF613A; + color: white; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 22px; + padding: 10px; + + } + +/*tabs_on_main_page*/ + /*end_static_pages*/ diff --git a/templates/pages/p_main.html b/templates/pages/p_main.html index 4c5152a..e900732 100644 --- a/templates/pages/p_main.html +++ b/templates/pages/p_main.html @@ -55,7 +55,6 @@ -

{% translate "О сервисе Trip With Bonus" %}

@@ -67,8 +66,18 @@ +
-

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

+ + + + + + + + +
+

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

@@ -91,50 +100,82 @@
- {% if page.url == 'for_customers' %} +

{% translate "Найдите перевозчика" %}

- {% endif %} - {% if page.url == 'for_movers' %} -

{% translate "Разместите объявление" %}

- {% endif %} - {% if page.url == 'for_customers' %} {% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %} - {% endif %} +
+ +
+

{% translate "Свяжитесь с перевозчиком" %}

+ {% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %} + +
+ +
+

{% translate "Передайте посылку" %}

+ + {% translate "Встречайтесь, знакомьтесь и передавайте посылку" %} + +
+ +
+
+
+

{% translate "Вам нужно отправить посылку быстро и недорого?" %}

+
+ +
+ +
+ + + +
+ +
+ + + +
+ +
+ +
+ +
+
+ + +

{% translate "Разместите объявление" %}

- {% if page.url == 'for_movers' %} {% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %} - {% endif %} +

{% translate "Свяжитесь с перевозчиком" %}

- {% if page.url == 'for_customers' %} - {% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %} - {% endif %} - {% if page.url == 'for_movers' %} + + {% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом. Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %} - {% endif %} +

{% translate "Передайте посылку" %}

- {% if page.url == 'for_customers' %} - {% translate "Встречайтесь, знакомьтесь и передавайте посылку" %} - {% endif %} - {% if page.url == 'for_movers' %} - {% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %} - {% endif %} + {% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %} +
+
- +