0.0.160 upd tab on main page

static/css/styles.css

@@ -439,7 +439,7 @@ footer>div {
     display: block;
     border-radius: 10px;
     background: #FF613A;
-    padding: 10px 20px;
+    padding: 10px 0px;
     color: #FFF;
     /* Body text 1 */
     font-family: Inter;
@@ -2087,15 +2087,9 @@ button#send_feedback_form{
       text-align: center;
     }
 
-    .tabs>input[type="radio"] {
+    /*.tabs>input[type="radio"] {*/
-      display: none;
-    }
-
-    /*.tabs>div {*/
-    /*  !* скрыть контент по умолчанию *!*/
     /*  display: none;*/
-    /*  font-size: 16px;*/
+    /*}*/
-    /*} */
 
      #content-1,#content-2
      {
@@ -2103,15 +2097,23 @@ button#send_feedback_form{
       display: none;
       font-size: 16px;
     }
-
+     #content-1.show,#content-2.show
-    /* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") */
+     {
-    #tab-btn-1:checked~#content-1,
+      /* скрыть контент по умолчанию */
-    #tab-btn-2:checked~#content-2
-    {
       display: block;
     }
 
-    .tabs>label {
+
+
+    /*!* отобразить контент, связанный с вабранной радиокнопкой (input type="radio") *!*/
+    /*#tab-btn-1:checked~#content-1,*/
+    /*#tab-btn-2:checked~#content-2*/
+    /*{*/
+    /*  display: block;*/
+    /*}*/
+
+    .tab-btn-1,
+    .tab-btn-2 {
         display: inline-block;
         text-align: center;
         vertical-align: middle;
@@ -2125,7 +2127,26 @@ button#send_feedback_form{
         top: 1px;
         padding: 10px;
         border-radius: 10px;
-        margin-bottom: 30px;
+        margin: 5px;
+    }
+
+    .wrapper_tab_button {
+    background: white;
+    border-radius: 14px;
+    width: 27%;
+    margin: auto;
+}
+
+    .tab-btn-active{
+        border-radius: 10px;
+        background: #FF613A;
+        color: white;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 22px;
+        padding: 10px;
+
     }
     .tabs>div>#title_static{
         font-size: 24px;
@@ -2138,18 +2159,18 @@ button#send_feedback_form{
       border-left: none;
     }
 
-    .tabs>input[type="radio"]:checked+label {
+    /*.tabs>input[type="radio"]:checked+label {*/
 
-        border-radius: 10px;
+    /*    border-radius: 10px;*/
-        background:  #FF613A;
+    /*    background:  #FF613A;*/
-        color: white;
+    /*    color: white;*/
-        font-size: 16px;
+    /*    font-size: 16px;*/
-        font-style: normal;
+    /*    font-style: normal;*/
-        font-weight: 500;
+    /*    font-weight: 500;*/
-        line-height: 22px;
+    /*    line-height: 22px;*/
-        padding: 10px;
+    /*    padding: 10px;*/
 
-    }
+    /*}*/
 
 /*tabs_on_main_page*/
 

static/js/user_profile.js

@@ -790,6 +790,36 @@ function counterText(evt) {
 }
 
 
+function showTabBtn(el) {
+
+    let mover_info = document.getElementById('content-1')
+    let customer_info = document.getElementById('content-2')
+    let tab_btn_1 = document.querySelector('.tab-btn-1')
+    let tab_btn_2 = document.querySelector('.tab-btn-2')
+
+    if (el.classList.contains('tab-btn-1')){
+        mover_info.classList.add('show')
+        customer_info.classList.remove('show')
+
+        tab_btn_1.classList.add('tab-btn-active')
+        tab_btn_2.classList.remove('tab-btn-active')
+
+
+    } else if(el.classList.contains('tab-btn-2')){
+        customer_info.classList.add('show')
+        mover_info.classList.remove('show')
+
+        tab_btn_2.classList.add('tab-btn-active')
+        tab_btn_1.classList.remove('tab-btn-active')
+
+
+
+    }
+
+
+}
+
+
 
 
 

templates/pages/p_main.html

@@ -63,13 +63,35 @@
 
         <div class="tabs">
 
+            <div class="wrapper_tab_button">
+                <div
+                        class="tab-btn-1 tab-btn-active"
+                        onclick="showTabBtn(this)"
+                >
+                    {% translate "Как отправить?" %}
+                </div>
 
-                <input type="radio" name="tab-btn" id="tab-btn-1" value="" checked>
+                <div
-                <label for="tab-btn-1">{% translate "Как отправить?" %}</label>
+                        class="tab-btn-2"
-                <input type="radio" name="tab-btn" id="tab-btn-2" value="">
+                        onclick="showTabBtn(this)"
-                <label for="tab-btn-2">{% translate "Как перевезти?" %}</label>
+                >
+                    {% translate "Как перевезти?" %}
+                </div>
 
-            <div id="content-1">
+            </div>
+
+
+
+
+{#                <input type="radio" name="tab-btn" id="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" class="show ">
                    <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
                    <div class="benefit_img">
 
@@ -175,6 +197,13 @@
             </div>
 
         </div>
+
+
+
+
+
+
+
     </div>
 
     <div class="pre_bottom_block_static">