From 0f9ce1abd641fcf18be3c3e54713f95842d8d700 Mon Sep 17 00:00:00 2001
From: ArtemB <mil.basalyga@gmail.com>
Date: Thu, 21 Sep 2023 11:52:46 +0300
Subject: [PATCH] 0.0.147 add switch

---
 static/css/styles.css       | 104 +++++-------------------------------
 templates/pages/p_main.html |  58 +++++++++++---------
 2 files changed, 46 insertions(+), 116 deletions(-)

diff --git a/static/css/styles.css b/static/css/styles.css
index c07444e..55c32bf 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -2017,102 +2017,22 @@ button#send_feedback_form{
     margin-bottom: 20px;
 }
 
+.wrapper_switch{
+    display: flex;
+    justify-content: center;
+    padding-bottom: 20px;
+}
+
+.search_form_main {
+    padding-top: 40px;
+}
+
 /*end_static_pages*/
 
-/*Switcher*/
-
-.checkbox-green {
-    display: block;
-    height: 28px;
-    line-height: 28px;
-    vertical-align: middle;
-    font-size: 14px;
-    user-select: none;
-    margin: auto;
-    text-align: center;
-}
-.checkbox-green .checkbox-green-switch {
-	display: inline-block;
-	height: 28px;
-	width: 90px;
-	box-sizing: border-box;
-	position: relative;
-	border-radius: 2px;
-	background: #848484;
-	transition: background-color 0.3s cubic-bezier(0, 1, 0.5, 1);
-}
-.checkbox-green .checkbox-green-switch:before {
-	content: attr(data-label-on);
-	display: inline-block;
-	box-sizing: border-box;
-	width: 45px;
-	padding: 0 12px;
-	position: absolute;
-	top: 0;
-	left: 45px;
-	text-transform: uppercase;
-	text-align: center;
-	color: rgba(255, 255, 255, 0.5);
-	font-size: 10px;
-	line-height: 28px;
-}
-.checkbox-green .checkbox-green-switch:after {
-	content: attr(data-label-off);
-	display: inline-block;
-	box-sizing: border-box;
-	width: 44px;
-	border-radius: 1px;
-	position: absolute;
-	top: 1px;
-	left: 1px;
-	z-index: 5;
-	text-transform: uppercase;
-	text-align: center;
-	background: white;
-	line-height: 26px;
-	font-size: 10px;
-	color: #777;
-	transition: transform 0.3s cubic-bezier(0, 1, 0.5, 1);
-}
-.checkbox-green input[type="checkbox"] {
-	display: block;
-	width: 0;
-	height: 0;
-	position: absolute;
-	z-index: -1;
-	opacity: 0;
-}
-.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch {
-	background-color: #70c767;
-}
-.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:before {
-	content: attr(data-label-off);
-	left: 0;
-}
-.checkbox-green input[type="checkbox"]:checked + .checkbox-green-switch:after {
-	content: attr(data-label-on);
-	color: #4fb743;
-	transform: translate3d(44px, 0, 0);
-}
-
-/* Hover */
-.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover {
-	cursor: pointer;
-}
-.checkbox-green input[type="checkbox"]:not(:disabled) + .checkbox-green-switch:hover:after {
-	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
-}
-
-/* Disabled */
-.checkbox-green input[type=checkbox]:disabled + .checkbox-green-switch {
-	opacity: 0.6;
-	filter: grayscale(50%);
-}
 
 
-/*END Switcher*/
+/*user_articles*/
 
-/*Confidential_ policy*/
 .wrapper_name_art {
     font-size: 44px;
     font-style: normal;
@@ -2133,7 +2053,7 @@ button#send_feedback_form{
     line-height: 22px;
 }
 
-/*END_Confidential_ policy*/
+/*END_user_articles*/
 
 
 
diff --git a/templates/pages/p_main.html b/templates/pages/p_main.html
index 349af52..4c5152a 100644
--- a/templates/pages/p_main.html
+++ b/templates/pages/p_main.html
@@ -25,40 +25,50 @@
             </p>
         </span>
 
-{#        <div class="switch">#}
-{#            <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" >#}
-{#                <label for="radio-1">Перевозчик</label>#}
-{#            </div>#}
-{#            <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>#}
-{#                <label for="radio-2">Отправитель</label>#}
-{#            </div>#}
-{#        </div>#}
+    <div class="wrapper_switch">
+        <div class="switch">
+            <div class="form_radio_btn">
 
-        <label class="checkbox-green">
-            <input type="checkbox">
-            <span class="checkbox-green-switch" data-label-on="On" data-label-off="Off"></span>
-        </label>
-
-
-        <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="">
+                <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>
+            </div>
+            <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>
+                <label for="radio-2">{% translate "Авиаперевозки" %}</label>
+            </div>
+        </div>
     </div>
 
-    <div class="cut-width">
-        {% include "blocks/b_find_route_form.html" %}
+
+    <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="cut-width">
+            {% include "blocks/b_find_route_form.html" %}
+        </div>
+
+
+    </div>
+
 
     <div class="mid_block_static">
 
         <h2 id="title_static">{% translate "О сервисе Trip With Bonus" %}</h2>
+            <span id="sub_title_static">
+                <p>
+                    {% translate "TWB  - это сервис, созданный для того, чтобы отправитель и перевозчик нашли друг-друга!" %}
+                    {% translate "Наш сервис предлагает вам прямые контакты, а не является посредником !" %}
+                </p>
+            </span>
 
 
-        <h2 id="title_static">{% translate "Как это работает?" %}</h2>
+
+        <h2 id="title_static">{% translate "Вам нужно отправить посылку быстро и недорого?" %}</h2>
             <div class="benefit_img">
 
                 <div class="benefit_img_item">