sysadminix/tripwithbonus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0.0.147 add switch

Browse Source
This commit is contained in:
ArtemB
2023-09-21 11:52:46 +03:00
parent c322053b02
commit 0f9ce1abd6
2 changed files with 46 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
static/css/styles.css
View File

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

58
templates/pages/p_main.html
View File

@@ -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">