0.0.125

static/css/styles(boris).css

@@ -993,29 +993,56 @@
     text-decoration: none;
 }
 
+
+.container_subscribe.second{
+    display: inline-block;
+}
+
+.container_subscribe.third{
+    float: right;
+    margin-right: 0;
+}
+
 .container_subscribe{
-    width: 31%;
+    width: 26%;
-    background: #FFFFFF;
     border-radius: 10px;
     padding: 2%;
+    box-shadow: -1px 4px 10px 0 rgba(198, 199, 203, 0.20), 0 -1px 10px 0 rgba(198, 199, 203, 0.20);
+    margin-right: 5%;
 }
 
 .container_subscribe.first{
     float: left;
 }
 
+.container_subscribe.light{
+    background: #FFFFFF;
+}
+
+.container_subscribe.dark{
+    background: #272424;
+}
+
+.container_subscribe.light .first-decr-subscribe{
+    color: #000000;
+}
+
 .first-decr-subscribe{
     width: 100%;
     text-align: center;
     font-size: 24px;
     font-weight: 700;
-    color: #000000;
     padding-bottom: 20px;
     border-bottom: 2px solid #FF613A;
 }
 
+.container_subscribe.dark .first-decr-subscribe{
+    color: #FFFFFF;
+}
+
 .price_subscribe{
     color: #FF613A;
+    padding-top: 25px;
 }
 
 .period_subscribe{
@@ -1062,16 +1089,26 @@
     list-style-image: url("/static/img/svg/galka.svg");
 }
 
-.items_subscribe.select{
+.container_subscribe.dark .items_subscribe.select{
+    font-size: 16px;
+    color: #FFFFFF;
+}
+
+.container_subscribe.light .items_subscribe.select{
     font-size: 16px;
     color: #272424;
 }
 
-.items_subscribe.unselected{
+.container_subscribe.light .items_subscribe.unselected{
     color: #E6E6E6;
     font-size: 16px;
 }
 
+.container_subscribe.dark .items_subscribe.unselected{
+    color: #626262;
+    font-size: 16px;
+}
+
 .items_subscribe.select:before{
     content: url(/static/img/svg/galka.svg);
 }
@@ -1083,10 +1120,15 @@
     vertical-align: top;
 }
 
-.items_subscribe.unselected:before{
+.container_subscribe.light .items_subscribe.unselected:before{
     content: url(/static/img/svg/cross.svg);
 }
 
+.container_subscribe.dark .items_subscribe.unselected:before{
+    content: url(/static/img/svg/cross.svg);
+    filter: brightness(0) saturate(100%) invert(29%) sepia(0%) saturate(6232%) hue-rotate(340deg) brightness(110%) contrast(60%);
+}
+
 .items_subscribe > text{
     display: inline-block;
     padding-left: 4%;
@@ -1094,5 +1136,15 @@
 }
 
 .items_subscribe{
-    padding-bottom: 5px;
+    padding-bottom: 10px;
+}
+
+.arrange_subscribe{
+    background: #FF613A;
+    height: 60px;
+    padding: 20px 35px 20px 35px;
+    color: #FFFFFF;
+    border-radius: 10px;
+    margin-top: 20px;
+    margin: 20px auto 0 auto;
 }

static/js/chat_sockets.js

@@ -61,7 +61,12 @@ chatSocket.onmessage = function (e) {
     } else if (data.type === "echo"){
         console.log(data)
     } else if (data.type === "update_chat"){
-        document.querySelector(".container-messages").innerHTML = data.message.html
+        document.querySelector(".container-messages").innerHTML = data.chat_html
+        if (data.required_beep === true){
+            const beep = new Audio('/static/sounds/beep_2.mp3')
+            beep.play()
+
+        }
     }
 }
 

templates/blocks/profile/b_subscribe.html

@@ -18,7 +18,7 @@
 
 
 <div class="type_of_subscribes">
-    <div class="container_subscribe first">
+    <div class="container_subscribe first light">
         <div class="first-decr-subscribe">
             <div>
                 Лайт
@@ -26,7 +26,7 @@
             <div class="price_subscribe">
                 2 $
             </div>
-            <div class="period_subscribe">
+            <div>
                 Период: 24 часа
             </div>
         </div>
@@ -45,6 +45,72 @@
                 </ul>
             </div>
         </div>
+        <div class="text-align-center">
+            <button class="arrange_subscribe">Оформить подписку</button>
+        </div>
     </div>
 
+    <div class="container_subscribe second dark">
+        <div class="first-decr-subscribe">
+            <div>
+                Лайт
+            </div>
+            <div class="price_subscribe">
+                2 $
+            </div>
+            <div>
+                Период: 24 часа
+            </div>
+        </div>
+        <div class="options_subscribe">
+            <div class="options_subscribe_title">
+                Опции:
+            </div>
+            <div class="list_options_subscribe">
+                <ul class="option_list">
+                    <li class="items_subscribe select"><text>Просмотр контактов</text></li>
+                    <li class="items_subscribe select"><text>Размещение заявок</text></li>
+                    <li class="items_subscribe select"><text>Уведомления на e-mail о появлении перевозчика по заданным критериям</text></li>
+                    <li class="items_subscribe unselected"><text>Выделение объявления цветом + 30 поднятий</text></li>
+                    <li class="items_subscribe unselected"><text>Push уведомления</text></li>
+                    <li class="items_subscribe unselected"><text>СМС уведомления</text></li>
+                </ul>
+            </div>
+        </div>
+        <div class="text-align-center">
+            <button class="arrange_subscribe">Оформить подписку</button>
+        </div>
+    </div>
+    <div class="container_subscribe third light">
+        <div class="first-decr-subscribe">
+            <div>
+                Лайт
+            </div>
+            <div class="price_subscribe">
+                2 $
+            </div>
+            <div>
+                Период: 24 часа
+            </div>
+        </div>
+        <div class="options_subscribe">
+            <div class="options_subscribe_title">
+                Опции:
+            </div>
+            <div class="list_options_subscribe">
+                <ul class="option_list">
+                    <li class="items_subscribe select"><text>Просмотр контактов</text></li>
+                    <li class="items_subscribe select"><text>Размещение заявок</text></li>
+                    <li class="items_subscribe select"><text>Уведомления на e-mail о появлении перевозчика по заданным критериям</text></li>
+                    <li class="items_subscribe unselected"><text>Выделение объявления цветом + 30 поднятий</text></li>
+                    <li class="items_subscribe unselected"><text>Push уведомления</text></li>
+                    <li class="items_subscribe unselected"><text>СМС уведомления</text></li>
+                </ul>
+            </div>
+        </div>
+        <div class="text-align-center">
+            <button class="arrange_subscribe">Оформить подписку</button>
+        </div>
+    </div>
+    <div class="clear_both"></div>
 </div>