0.0.147 add tabs on main page

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*/
 
 

templates/pages/p_main.html

@@ -55,7 +55,6 @@
 
     </div>
 
-
     <div class="mid_block_static">
 
         <h2 id="title_static">{% translate "О сервисе Trip With Bonus" %}</h2>
@@ -67,8 +66,18 @@
             </span>
 
 
+        <div class="tabs">
 
-        <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
+                <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
+                <label for="tab-btn-1">{% translate "Как отправить?" %}</label>
+                <input type="radio" name="tab-btn" id="tab-btn-2" value="">
+                <label for="tab-btn-2">{% translate "Как перевезти?" %}</label>
+
+
+
+
+            <div id="content-1">
+               <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
             <div class="benefit_img">
 
                 <div class="benefit_img_item">
@@ -91,50 +100,82 @@
 
             <div class="benefit_title">
                 <div class="benefit_title_item">
-                    {% if page.url == 'for_customers' %}
+
                         <h3>{% translate "Найдите перевозчика" %}</h3>
-                    {% endif %}
-                    {% if page.url == 'for_movers' %}
-                        <h3>{% translate "Разместите объявление" %}</h3>
-                    {% endif %}
 
-                    {% if page.url == 'for_customers' %}
                         <span>{% translate "Зайдите на сайт Trip With Bonus и в форме вверху страницы, заполните данные для поиска перевозчика." %}</span>
-                    {% endif %}
+                </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 id="content-2">
+               <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
+            <div class="benefit_img">
+
+                <div class="benefit_img_item">
+                     <img src="/static/img/svg/Find_carrier.svg" alt="">
+                </div>
+
+                <img src="/static/img/svg/Arrow_direction.svg" alt="">
+
+                <div class="benefit_img_item">
+                    <img src="/static/img/svg/Contact_carrier.svg" alt="">
+                </div>
+
+                <img src="/static/img/svg/Arrow_direction.svg" alt="">
+
+                <div class="benefit_img_item">
+                    <img src="/static/img/svg/Pass_package.svg" alt="">
+                </div>
+
+            </div>
+
+            <div class="benefit_title">
+                <div class="benefit_title_item">
+
+
+                        <h3>{% translate "Разместите объявление" %}</h3>
 
-                    {% if page.url == 'for_movers' %}
                         <span>{% translate "Укажите откуда, куда хотите перевезти посылку, а также Вашу дату отправки и прибытия. При желании Вы можете указать дополнительные параметры: тип, вес, вид перевозки и т.д" %}</span>
-                    {% endif %}
+
 
                 </div>
 
                 <div class="benefit_title_item">
                     <h3>{% translate "Свяжитесь с перевозчиком" %}</h3>
 
-                    {% if page.url == 'for_customers' %}
-                        <span>{% translate "Откройте контакты на сайте и договоритесь о месте встречи и условиях перевозки" %}</span>
-                    {% endif %}
 
-                    {% if page.url == 'for_movers' %}
+
+
                         <span>{% translate "В отобразившемся списке выберите подходящего отправителя и посылку, откройте контакты и свяжитесь удобным способом.  Если не нашли подходящего отправителя с посылкой, разместите объявление о возможности перевезти посылку и отправители Вас сами найдут" %}</span>
-                    {% endif %}
+
 
                 </div>
 
                 <div class="benefit_title_item">
                     <h3>{% translate "Передайте посылку" %}</h3>
-                    {% if page.url == 'for_customers' %}
-                        <span>{% translate "Встречайтесь, знакомьтесь и передавайте посылку" %}</span>
-                    {% endif %}
 
-                    {% if page.url == 'for_movers' %}
-                        <span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>
-                    {% endif %}
+                    <span>{% translate "Обсудите с отправителем все условия: время, место и прочие детали. Готово! Доставьте посылку из пункта А в пункт Б и получите благодарность отправителя!" %}</span>
+
                 </div>
 
             </div>
+            </div>
 
-
+        </div>
     </div>