0.0.216
This commit is contained in:
@@ -16,6 +16,9 @@
|
||||
|
||||
}
|
||||
|
||||
.orange-text{
|
||||
color: #FF613A;
|
||||
}
|
||||
|
||||
.title_page{
|
||||
font-size: 44px;
|
||||
@@ -1325,6 +1328,11 @@
|
||||
content: url(/static/img/svg/galka.svg);
|
||||
}
|
||||
|
||||
.items_subscribe.select.green:before{
|
||||
content: url(/static/img/svg/galka.svg);
|
||||
filter: brightness(0) saturate(100%) invert(76%) sepia(11%) saturate(7432%) hue-rotate(88deg) brightness(94%) contrast(106%);
|
||||
}
|
||||
|
||||
.items_subscribe:before{
|
||||
color: #FF613A;
|
||||
display: inline-block;
|
||||
@@ -1332,6 +1340,168 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.subscribe_inf{
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.inf_about_tarif_plan_text{
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: #272424;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.subscribe_inf_left_part{
|
||||
width: 54%;
|
||||
background: #FFFFFF;
|
||||
filter: drop-shadow(-1px 4px 10px rgba(198, 199, 203, 0.20)) drop-shadow(0px -1px 10px rgba(198, 199, 203, 0.20));
|
||||
padding: 2.373%;
|
||||
float: left;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.subscribe_inf_right_part{
|
||||
width: 33%;
|
||||
background: #FFFFFF;
|
||||
filter: drop-shadow(-1px 4px 10px rgba(198, 199, 203, 0.20)) drop-shadow(0px -1px 10px rgba(198, 199, 203, 0.20));
|
||||
padding: 2.373%;
|
||||
float: right;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.title_options{
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
color: #272424;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title_subscribe{
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.name_subscribe{
|
||||
font-size: 44px;
|
||||
font-weight: 700;
|
||||
color: #000000;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.extend_subscribe_btn{
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background: #FF613A;
|
||||
padding: 8px 26px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.another_subscribe{
|
||||
width: 98%;
|
||||
padding: 24px 20px;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20);
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.name_subscribe_another{
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
color: #272424;
|
||||
}
|
||||
|
||||
.padding-n-width-another-subscribes{
|
||||
width: 27%;
|
||||
padding-right: 2%;
|
||||
}
|
||||
|
||||
.text_another_subscribe{
|
||||
font-size: 16px;
|
||||
color: #272424;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.read_more_about_subscribe{
|
||||
color: #FFFFFF;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
background: #FF613A;
|
||||
padding: 8px 26px;
|
||||
border-radius: 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subscribe_was_paid{
|
||||
color: #27242499;
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
margin-bottom: 55px;
|
||||
}
|
||||
|
||||
.label_toggle_switch_cont{
|
||||
color: #272424;
|
||||
font-size: 14px;
|
||||
width: 94%;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.toggle_switch_cont{
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
float: right;
|
||||
width: 6%;
|
||||
}
|
||||
|
||||
.input_toggle_switch{
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
border-radius: 10px;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.input_toggle_switch_display{
|
||||
width: 28px;
|
||||
height: 16px;
|
||||
background: #272424;
|
||||
border-radius: 10px;
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
.toggler_input_switch{
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
bottom: 1px;
|
||||
background: #FFFFFF;
|
||||
border-radius: 100%;
|
||||
display: block;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
.input_toggle_switch:checked + .input_toggle_switch_display{
|
||||
transition: 200ms;
|
||||
background: #FF613A;
|
||||
}
|
||||
|
||||
.input_toggle_switch:checked ~ .toggler_input_switch{
|
||||
transform: translateX(10px);
|
||||
-webkit-transform: translateX(10px);
|
||||
-ms-transform: translateX(10px);
|
||||
transition: 200ms;
|
||||
}
|
||||
|
||||
/*.container_subscribe.light .items_subscribe.unselected:before{*/
|
||||
/* content: url(/static/img/svg/cross.svg);*/
|
||||
/*}*/
|
||||
@@ -1348,6 +1518,11 @@
|
||||
filter: brightness(0) saturate(100%) invert(81%) sepia(1%) saturate(460%) hue-rotate(31deg) brightness(84%) contrast(81%);
|
||||
}
|
||||
|
||||
.items_subscribe.unselect.red:before{
|
||||
content: url(/static/img/svg/cross.svg);
|
||||
filter: brightness(0) saturate(100%) invert(11%) sepia(92%) saturate(7217%) hue-rotate(3deg) brightness(99%) contrast(112%);
|
||||
}
|
||||
|
||||
.items_subscribe.unselect{
|
||||
/*color: #d1d1d1;*/
|
||||
/*color: #626262;*/
|
||||
@@ -1502,4 +1677,5 @@
|
||||
border-bottom: 1px solid #919BA5;
|
||||
margin-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -303,3 +303,30 @@ function sendMessageEnter (e,id_ticket,sender,receiver){
|
||||
//
|
||||
}
|
||||
}
|
||||
|
||||
function send_subscribe (id){
|
||||
let data = {
|
||||
'subscribe_id':id
|
||||
}
|
||||
$.ajax({
|
||||
headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
|
||||
url: '/ru/subscribes/subscribe_now/',
|
||||
type: "POST",
|
||||
// async: true,
|
||||
cache: false,
|
||||
processData: false,
|
||||
contentType: false,
|
||||
// enctype: 'json',
|
||||
data: JSON.stringify(data),
|
||||
success: function(data){
|
||||
|
||||
document.querySelector(".info_profile").innerHTML = data.html;
|
||||
|
||||
},
|
||||
error: function (data){
|
||||
|
||||
document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1 +1,72 @@
|
||||
{% load static %}
|
||||
{% load static %}
|
||||
|
||||
<div class="title-profile-cont">
|
||||
Подписка
|
||||
</div>
|
||||
{% for subscribe in subscribe_for_user %}
|
||||
<div class="subscribe_inf">
|
||||
<div class="subscribe_inf_left_part">
|
||||
<div class="text-align-center">
|
||||
<div class="title_subscribe">Ваш тарифный план</div>
|
||||
<div class="name_subscribe">{{ subscribe.subscribe.name }}</div>
|
||||
<button class="extend_subscribe_btn">Продлить</button>
|
||||
<div class="subscribe_was_paid">Тариф оплачен до: {{ subscribe.paid_period_to_DT|date:"d.m.y" }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="width-100">
|
||||
<div class="label_toggle_switch_cont">
|
||||
<label for="id_paid_toggle">Автопродление тарифного плана</label>
|
||||
</div>
|
||||
<div class="toggle_switch_cont">
|
||||
<input class="input_toggle_switch" id="id_paid_toggle" name="paid_toggle" type="checkbox">
|
||||
<div class="input_toggle_switch_display"></div>
|
||||
<div class="toggler_input_switch"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="width-100">
|
||||
<div class="label_toggle_switch_cont">
|
||||
<label for="id_email_toggle">Получать уведомление на почту о завершении подписки</label>
|
||||
</div>
|
||||
<div class="toggle_switch_cont">
|
||||
<input class="input_toggle_switch" id="id_email_toggle" name="email_toggle" type="checkbox">
|
||||
<div class="input_toggle_switch_display"></div>
|
||||
<div class="toggler_input_switch"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="subscribe_inf_right_part">
|
||||
<div class="title_options">Опции тарифа</div>
|
||||
<ul class="option_list">
|
||||
{% for opt in subscribe.subscribe.options.all %}
|
||||
<li class="items_subscribe select green" style="color: {{ subscribe.text_color }}"><text>{{ opt.name }}</text></li>
|
||||
{% endfor %}
|
||||
{% for opt_dis in subscribe.subscribe.disabled_options %}
|
||||
<li class="items_subscribe unselect red"><text>{{ opt_dis.name }}</text></li>
|
||||
{% endfor %}
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="clear_both"></div>
|
||||
</div>
|
||||
<div class="inf_about_tarif_plan_text"><b>При понижении тарифного</b> плана оплаченный период действия текущей подписки не пересчитывается.</div>
|
||||
<div class="b_another_subscribes">
|
||||
{% for item in subscribes %}
|
||||
{% if item.id != subscribe.subscribe.id %}
|
||||
|
||||
<div class="another_subscribe">
|
||||
<div class="name_subscribe_another padding-n-width-another-subscribes">{{ item.name }}</div>
|
||||
<div class="text_another_subscribe padding-n-width-another-subscribes">
|
||||
Стоимость:<span class="orange-text">{{ item.price }}</span>
|
||||
</div>
|
||||
<div class="text_another_subscribe padding-n-width-another-subscribes">
|
||||
Период:<span class="orange-text">{{ item.period_name }}</span>
|
||||
</div>
|
||||
<button class="read_more_about_subscribe" onclick="send_subscribe({{ item.id }})">Перейти</button>
|
||||
</div>
|
||||
|
||||
{% endif %}
|
||||
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -51,7 +51,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-align-center">
|
||||
<button class="arrange_subscribe">Оформить подписку</button>
|
||||
<button onclick="send_subscribe({{ subscribe.id }})" class="arrange_subscribe">Оформить подписку</button>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user