0.0.216

static/css/styles(boris).css

@@ -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;*/
@@ -1503,3 +1678,4 @@
     margin-top: 30px;
     margin-bottom: 30px;
 }
+

static/js/user_profile(boris).js

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

templates/blocks/profile/b_subscribe_current.html

@@ -1 +1,72 @@
 {% 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 %}

templates/blocks/profile/b_subscribe_variants.html

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