This commit is contained in:
2023-08-13 17:02:35 +03:00
parent c1b8896799
commit 25b785c5ea
3 changed files with 133 additions and 10 deletions

View File

@@ -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%;
background: #FFFFFF;
width: 26%;
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;
}

View File

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

View File

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