This commit is contained in:
2023-08-31 18:27:55 +03:00
parent 2757ea4d95
commit d5d702c431
4 changed files with 277 additions and 3 deletions

View File

@@ -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;
}
}

View File

@@ -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;
}
});
}

View File

@@ -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 %}

View File

@@ -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 %}