@keyframes popup-right-life {
0% {
left: 100%;
}
9.09091% {
left: 0%;
}
90.90909% {
left: 0%;
}
100% {
left: 100%;
}
}
@keyframes popup-left-life {
0% {
left: -100%;
}
9.09091% {
left: 0%;
}
90.90909% {
left: 0%;
}
100% {
left: -100%;
}
}
.comagic-widget--hidden {
visibility: hidden;
}
.comagic-unselectable {
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
[c-draggable="x"] [c-dragger] {
cursor: ew-resize;
}
[c-draggable="x"] [c-dragger] *:not([c-nodragger]) {
cursor: ew-resize;
pointer-events: none;
}
[c-draggable="y"] [c-dragger] {
cursor: ns-resize;
}
[c-draggable="y"] [c-dragger] *:not([c-nodragger]) {
cursor: ns-resize;
pointer-events: none;
}
[c-draggable="xy"] [c-dragger] {
cursor: move;
}
[c-draggable="xy"] [c-dragger] *:not([c-nodragger]) {
cursor: move;
pointer-events: none;
}
.comagic-full-screen-mode {
min-height: 100%;
max-height: 100%;
}
.comagic-lead {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
z-index: 100005;
}
.comagic-lead__work-area {
margin-top: 7.9%;
}
.comagic-lead__info-area {
padding-left: 9.6%;
padding-right: 9.6%;
padding-top: 7.9%;
}
.comagic-lead__image {
margin-bottom: 4.3%;
text-align: center;
}
.comagic-lead__image img {
height: 122px;
border-width: 1px;
border: solid white;
border-radius: 50%;
display: block;
margin: auto;
}
.comagic-lead__title {
font-family: "Open Sans Comagic", sans-serif;
text-align: center;
font-weight: 600;
font-size: 144%;
line-height: 110%;
margin-bottom: 2.2%;
}
.comagic-lead__message {
font-family: "Open Sans Comagic", sans-serif;
text-align: center;
font-size: 92.5%;
line-height: 145%;
}
.comagic-lead__work-area--personal-form .comagic-lead__image--personal-form {
text-align: center;
}
.comagic-lead__work-area--personal-form .comagic-lead__image--personal-form img {
display: block;
margin: auto;
width: 100%;
}
.comagic-lead__work-area--personal-form .comagic-lead__title {
font-family: "Open Sans Comagic", sans-serif;
text-align: center;
font-weight: 600;
font-size: 5.6vmin;
line-height: 6.1vmin;
margin-bottom: 1.7vmin;
padding-left: 9.6vmin;
padding-right: 9.6vmin;
}
.comagic-lead__work-area--personal-form .comagic-lead__message {
font-family: "Open Sans Comagic", sans-serif;
text-align: center;
font-size: 3.6vmin;
line-height: 5.1vmin;
padding-left: 9.6vmin;
padding-right: 9.6vmin;
padding-top: 7.9vmin;
}
.comagic-lead__invite-step {
display: none;
}
.comagic-lead__fields-wrapper {
padding-left: 9.6%;
padding-right: 9.6%;
padding-top: 9.1%;
}
.comagic-lead__field-container {
padding-top: 5%;
padding-bottom: 5%;
}
.comagic-lead__field-wrapper {
position: relative;
}
.comagic-lead__error-icon, .comagic-lead__error-tooltip {
display: none;
}
.comagic-lead__field__input--select {
background: url("//app2.comagic.ru/widget/images/lead/mobile/trigger-combobox.png") no-repeat;
background-position: right 12px center;
}
.comagic-lead__field__select {
width: 100%;
height: 100%;
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
.comagic-lead__field__input {
font-size: 144%;
padding-bottom: 4%;
border-radius: 0;
width: 100%;
background-color: transparent;
border: none;
border-bottom: 1px solid;
outline: none;
font-family: "Open Sans Comagic", sans-serif;
font-weight: 300;
text-indent: 3px;
}
.comagic-lead__field__textarea {
font-size: 144%;
padding-bottom: 4%;
overflow: hidden;
height: 27px;
resize: none;
display: block;
border-radius: 0;
width: 100%;
background-color: transparent;
border: none;
border-bottom: 1px solid;
outline: none;
font-family: "Open Sans Comagic", sans-serif;
font-weight: 300;
text-indent: 3px;
}
.comagic-lead__field-wrapper:not(.comagic-error--hidden) {
position: relative;
}
.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__error-icon {
position: absolute;
display: block;
background-image: url("//app2.comagic.ru/widget/images/lead/mobile/error-icon.svg");
height: 15px;
width: 15px;
background-size: 100%;
bottom: 50%;
right: 0;
}
.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__error-tooltip {
display: block;
color: #ff5433;
font-size: 92.5%;
margin-top: 2.7%;
}
.comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-input-select {
background: url("//app2.comagic.ru/widget/images/lead/mobile/trigger-combobox.png") no-repeat;
background-position: right 12px center;
}
.comagic-lead__button-area {
bottom: 0;
width: 100%;
}
.comagic-lead__main-button {
display: block;
text-align: center;
outline: none;
position: static;
float: none;
color: white;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
vertical-align: baseline;
box-sizing: content-box;
-moz-box-sizing: content-box;
-ms-box-sizing: content-box;
-webkit-box-sizing: content-box;
background-image: none;
}
.comagic-lead__main-button span {
font-size: 116%;
text-transform: uppercase;
letter-spacing: .04em;
font-weight: 600;
}
.comagic-lead__button-close.comagic-personal-form {
border-radius: 50%;
background-color: #E7E9E9;
}
.comagic-lead__footer-area {
-webkit-text-size-adjust: 100%;
min-height: 1px;
font-size: 97.7%;
line-height: 145%;
text-align: center;
font-family: "Open Sans Comagic", sans-serif;
}
.comagic-lead__footer-area a {
text-decoration: underline;
}
.comagic-lead__button-close {
position: absolute;
background-image: url("//app2.comagic.ru/widget/images/lead/mobile/close-button.svg");
background-repeat: no-repeat;
background-position: center;
top: 4%;
right: 4%;
height: 32px;
width: 32px;
background-size: 50%;
}
.comagic-lead__mask {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
}
.comagic-lead__content {
box-sizing: border-box;
position: fixed;
width: 100%;
bottom: 0;
left: 0;
min-height: 32%;
max-height: 87%;
transition-property: min-height, max-height;
transition-duration: 0ms;
overflow: auto;
}
.comagic-lead__content.comagic-full-screen-mode {
min-height: 100%;
max-height: 100%;
}
.comagic-lead__dark {
background-color: #232323;
}
.comagic-lead__dark .comagic-lead__message {
color: #fff;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea {
border-bottom-color: #ff5433;
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-webkit-input-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-moz-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-moz-placeholder {
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-moz-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-moz-placeholder {
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-ms-input-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-ms-input-placeholder {
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__label--personal-info {
color: #ff5433;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea {
border-bottom-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-webkit-input-placeholder {
color: #fff;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
color: #fff;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-moz-placeholder {
color: #fff;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-moz-placeholder {
color: #fff;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-moz-placeholder {
color: #fff;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-moz-placeholder {
color: #fff;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-ms-input-placeholder {
color: #fff;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__dark .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-ms-input-placeholder {
color: #fff;
}
.comagic-lead__dark .comagic-lead__footer-area a {
color: rgba(255, 255, 255, 0.6);
}
.comagic-lead__dark .comagic-lead__field__label--personal-info {
color: #fff;
}
.comagic-lead__light {
background-color: #fff;
}
.comagic-lead__light .comagic-lead__message {
color: #000;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea {
border-bottom-color: #ff5433;
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-webkit-input-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-moz-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-moz-placeholder {
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea::-moz-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus::-moz-placeholder {
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:-ms-input-placeholder {
color: #ff5433;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__textarea:focus:-ms-input-placeholder {
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper:not(.comagic-error--hidden) .comagic-lead__field__label--personal-info {
color: #ff5433;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea {
border-bottom-color: rgba(0, 0, 0, 0.25);
color: #000;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-webkit-input-placeholder {
color: #000;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-webkit-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-webkit-input-placeholder {
color: #000;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-moz-placeholder {
color: #000;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-moz-placeholder {
color: #000;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea::-moz-placeholder {
color: #000;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus::-moz-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus::-moz-placeholder {
color: #000;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:-ms-input-placeholder {
color: #000;
text-transform: uppercase;
font-weight: 600;
opacity: 0.5;
font-style: italic;
letter-spacing: 0.04em;
font-size: 70%;
}
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__input:focus:-ms-input-placeholder,
.comagic-lead__light .comagic-lead__fields-wrapper .comagic-lead__field-wrapper .comagic-lead__field__textarea:focus:-ms-input-placeholder {
color: #000;
}
.comagic-lead__light .comagic-lead__footer-area a {
color: rgba(0, 0, 0, 0.6);
}
.comagic-lead__light .comagic-lead__field__label--personal-info {
color: #000;
}
.comagic-lead__field__input--personal-info {
float: left;
width: 4vw;
height: 4vw;
margin: 3px 3px 3px 4px;
}
.comagic-lead__field__label {
font-family: "Open Sans Comagic", sans-serif;
font-size: 89%;
}
.comagic-call-generator__block-delayed-call {
display: flex;
}
.comagic-call-generator__field-delayed-call-day {
margin-right: 5px;
}
.comagic-call-generator__field-delayed-call-time {
margin-left: 5px;
}
.comagic-call-generator__linkbutton-delayed-call {
display: block;
margin-bottom: 15px;
}
@media screen and (min-aspect-ratio: 13 / 9) {
.comagic-lead__content {
min-height: 100%;
max-height: 100%;
}
.comagic-lead__mask {
min-height: 100%;
max-height: 100%;
}
.comagic-lead__image {
display: none;
}
.comagic-lead__button-area .comagic-lead__main-button {
height: 100%;
margin: 0 25% 5vmin 25%;
border-radius: 20vmin;
}
.comagic-lead__button-area span {
line-height: 285%;
}
.comagic-lead__footer-area {
margin-top: -15%;
margin-bottom: 5%;
}
.comagic-lead__field__label--personal-info {
line-height: 225%;
}
.comagic-lead__work-area, .comagic-lead__work-area--personal-form {
margin-bottom: 15%;
}
.comagic-lead__work-area--personal-form .comagic-lead__image--personal-form {
display: none;
}
.comagic-lead__work-area--personal-form .comagic-lead__title {
padding-top: 15.8vmin;
}
}
@media screen and (max-aspect-ratio: 13 / 9) {
.comagic-lead__button-area {
position: fixed;
}
.comagic-lead__button-area .comagic-lead__main-button {
height: 100%;
}
.comagic-lead__button-area span {
line-height: 400%;
}
.comagic-lead__field__label--personal-info {
line-height: 155%;
}
.comagic-lead__footer-area {
margin-top: -20%;
margin-bottom: 28%;
}
.comagic-lead__work-area, .comagic-lead__work-area--personal-form {
margin-bottom: 25%;
}
.comagic-lead__work-area--personal-form .comagic-lead__title {
padding-top: 7.9vmin;
}
}
Comagic.UI.registerViewController('call_generator', function (settings, tpls) {
var callGenerator = Comagic.UI.createWidget('call_generator', {
settings: settings,
id: settings['id'],
template: tpls['call_generator'],
_fields: {},
_delayedCallProps: {},
_delayedCallBlockState: null,
_setFieldError: function (field, error) {
field.classList.toggle('comagic-error--hidden', !error);
if (field.classList.contains('comagic-combobox-field')) field.querySelector('.comagic-lead__field__input').classList.toggle('comagic-lead__field__input--select', !error);
field.value = error || null;
},
_isValid: function () {
var errors = callGenerator.getErrors() || {},
_isValid = true;
callGenerator._fieldWrapperEl && callGenerator._fieldWrapperEl.forEach(function (field) {
var input = field.querySelector('input') || field.querySelector('textarea'),
error = errors[input.getAttribute('c-name')];
if (error) {
_isValid = false;
callGenerator._setFieldError(field, true);
}
});
return _isValid;
},
_init: function () {
var comboValue;
callGenerator._closeButtonEl = callGenerator.getEl('.comagic-lead__button-close');
callGenerator._mainButtonEl = callGenerator.getEl('.comagic-lead__main-button');
callGenerator._contentEl = callGenerator.getEl('.comagic-lead__content');
callGenerator._fieldWrapperEl = [].slice.apply(callGenerator.getEl().getElementsByClassName('comagic-lead__field-wrapper'));
callGenerator.getEl('.comagic-lead__button-close').addEventListener('click', function () {
if (!callGenerator.isSubmitted()) {
callGenerator.cancel();
}
callGenerator.hide();
Comagic.UI.Mobile.unform();
});
callGenerator._fieldWrapperEl && callGenerator._fieldWrapperEl.forEach(function (field) {
var input = field.querySelector('input') || field.querySelector('textarea');
if (field.classList.contains('comagic-combobox-field--group')) {
var select = field.querySelector('select');
callGenerator._initSelectOption(select);
select.value = null;
select.addEventListener('change', function () {
callGenerator._removeEmptyOption(select);
var selectedValue = select.value,
selectedNode = [].slice.apply(select.children || []).filter(function (node) {
return node.value == selectedValue;
})[0];
input.value = selectedNode && selectedNode.text;
if (!isNaN(parseFloat(selectedValue)) && isFinite(selectedValue)) {
selectedValue = +selectedValue;
}
callGenerator._setFieldError(field, false);
comboValue = selectedValue;
});
} else {
input.addEventListener('focus', function () {
callGenerator._setFieldError(field, false);
setTimeout(function () {
callGenerator._contentEl.scrollTop = input.parentElement.parentElement.offsetTop;
}, 500);
})
}
});
callGenerator._mainButtonEl && callGenerator._mainButtonEl.addEventListener('click', function () {
if (callGenerator._isValid()) {
var values = callGenerator.getValues();
if (comboValue) values.group_id = comboValue;
callGenerator.submit(values);
callGenerator.hide();
Comagic.UI.Mobile.unform();
}
});
callGenerator._initDelayedCallBlock();
},
_initSelectOption: function (selectEl) {
if (this.getEl().classList.contains('comagic-iphone')) {
this._addEmptyOption(selectEl);
}
},
_addEmptyOption: function (selectEl) {
var emptyOption = document.createElement('option');
emptyOption.setAttribute('value', '');
selectEl.insertBefore(emptyOption, selectEl.firstChild);
},
_getEmptyOption: function (selectEl) {
return selectEl.querySelector('option[value=""]');
},
_removeEmptyOption: function (selectEl) {
var emptyOption = this._getEmptyOption(selectEl);
if (emptyOption) {
emptyOption.remove();
}
},
_initDelayedCallBlock: function () {
if (!callGenerator.settings.delayed_call_times) {
return;
}
callGenerator.delayedCallBlockEl = callGenerator.getEl('.comagic-call-generator__block-delayed-call');
callGenerator.delayedCallBlockButton = callGenerator.getEl('.comagic-call-generator__linkbutton-delayed-call');
callGenerator._fields['delayed_call_day'] = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day');
callGenerator._delayedCallProps.dayFakeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day__input');
callGenerator._delayedCallProps.daySelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-day__select');
callGenerator._fields['delayed_call_time'] = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time');
callGenerator._delayedCallProps.timeFakeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time__input');
callGenerator._delayedCallProps.timeSelectField = callGenerator.getEl('.comagic-call-generator__field-delayed-call-time__select');
if (callGenerator.delayedCallBlockButton) {
callGenerator._setDelayedCallBlockState(false);
callGenerator.delayedCallBlockButton.addEventListener('click', function () {
callGenerator._setDelayedCallBlockState(!callGenerator._delayedCallBlockState);
});
}
callGenerator._delayedCallProps.daySelectField.addEventListener('change', function () {
callGenerator._removeEmptyOption(callGenerator._delayedCallProps.daySelectField);
var index = callGenerator._delayedCallProps.daySelectField.selectedIndex,
selectedOption = callGenerator._delayedCallProps.daySelectField.options[index];
if (selectedOption && selectedOption.text !== callGenerator._delayedCallProps.dayFakeSelectField.value) {
callGenerator._delayedCallProps.dayFakeSelectField.value = selectedOption.text;
var options = '';
for (var i = 0; i < callGenerator.settings.delayed_call_times[index].times.length; i++) {
options += '<option value=' + callGenerator.settings.delayed_call_times[index].times[i] + '>' +
Comagic.UI.toTimeString(new Date(callGenerator.settings.delayed_call_times[index].times[i])) + '</option>';
}
callGenerator._delayedCallProps.timeSelectField.innerHTML = options;
callGenerator._initSelectOption(callGenerator._delayedCallProps.timeSelectField);
callGenerator._delayedCallProps.timeSelectField.value = null;
callGenerator._delayedCallProps.timeFakeSelectField.value = '';
callGenerator._setFieldError(callGenerator._fields['delayed_call_time'], false);
}
callGenerator._setFieldError(callGenerator._fields['delayed_call_day'], false);
});
callGenerator._delayedCallProps.timeSelectField.addEventListener('change', function () {
callGenerator._removeEmptyOption(callGenerator._delayedCallProps.timeSelectField);
var index = callGenerator._delayedCallProps.timeSelectField.selectedIndex,
selectedOption = callGenerator._delayedCallProps.timeSelectField.options[index];
if (selectedOption) {
callGenerator._delayedCallProps.timeFakeSelectField.value = selectedOption.text;
}
callGenerator._setFieldError(callGenerator._fields['delayed_call_time'], false);
});
var options = '';
for (var i = 0; i < callGenerator.settings.delayed_call_times.length; i++) {
options += '<option>' + Comagic.UI.toDateString(new Date(callGenerator.settings.delayed_call_times[i].date)) + '</option>';
}
callGenerator._delayedCallProps.daySelectField.innerHTML = options;
callGenerator._initSelectOption(callGenerator._delayedCallProps.daySelectField);
callGenerator._delayedCallProps.daySelectField.value = null;
},
_setDelayedCallBlockState: function (enabled) {
callGenerator._delayedCallBlockState = enabled;
callGenerator.delayedCallBlockButton.innerText = enabled ? 'Звонок сейчас' : 'Выбрать другое время';
callGenerator.delayedCallBlockEl.style.display = enabled ? 'flex' : 'none';
callGenerator._delayedCallProps.timeFakeSelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
callGenerator._delayedCallProps.timeSelectField.value = null;
callGenerator._delayedCallProps.timeSelectField.innerHTML = '';
callGenerator._delayedCallProps.timeFakeSelectField.value = '';
callGenerator._delayedCallProps.daySelectField.value = null;
callGenerator._delayedCallProps.dayFakeSelectField.value = '';
callGenerator._delayedCallProps.dayFakeSelectField[enabled ? 'removeAttribute' : 'setAttribute']('c-disabled', '');
}
});
callGenerator.render();
callGenerator._init();
callGenerator.show();
Comagic.UI.Mobile.form();
callGenerator.on('leadhide', function () {
callGenerator.hide();
Comagic.UI.Mobile.unform();
});
});
<!DOCTYPE html>
<html>
<head>
<script>
var __cs = __cs || [];
__cs.push(['applyWidgetsOptions', {
'call_generator': {
mobile: {
js: 'call_generator.js',
css: 'call_generator.css',
tpls: {
'call_generator': 'tpls/call_generator.html'
}
}
}
}]);
</script>
<script type="text/javascript" async src="https://app.comagic.ru/widget/js/preview.min.js"></script>
</head>
<body>
<h1>Генератор звонка</h1>
</body>
</html>
{
"image_url": null,
"allowed_groups": [
{
"id": 15846,
"name": "Группа 1"
},
{
"id": 15857,
"name": "Группа 2"
},
{
"id": 16305,
"name": "Группа 3"
}
],
"group_title": "Группы",
"fields": [],
"delayed_call_times": false,
"is_schedule_active": true,
"banner_color": "FFD441",
"available_connect_ways": [
"sitephone",
"chat",
"offline_message"
],
"site_id": 26760,
"preferred_connect_way": "chat",
"banner_skin": null,
"id": 5217,
"inactive_schedule_banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
"banner_branding_text": "CoMagic.ru",
"banner_branding_url": "http://www.comagic.ru/?utm_medium=widget&utm_campaign=link_widget",
"is_answer_countdown_timeout": false,
"banner_text": "Мы ценим Ваше время и готовы помочь найти нужную Вам информацию. Если Вы готовы, мы обсудим это по телефону.",
"staff_group_title": "Группы",
"inactive_schedule_banner_title": "Хотите, мы перезвоним в течение минуты?",
"is_delayed_call_enabled": false,
"answer_countdown_timeout": 60,
"scenario_id": 13110,
"button_color": "43A400",
"image_id": null,
"button_color_mobile": "00A500",
"is_always_displayed": false,
"banner_color_mobile": "FFFFFF",
"banner_title": "Хотите, мы перезвоним в течение минуты?",
"button_text": "Жду звонка",
"is_image": false,
"app_id": 1103,
"widget_link_text": false,
"widget_link_url": false,
"is_groups_enabled": true
}
<div class="comagic-widget comagic-lead comagic-lead-call-generator">
<div class="comagic-lead__mask"></div>
<div class="comagic-lead__content <% if (banner_color_mobile === '232323') { %> comagic-lead__dark <% } else { %> comagic-lead__light <% } %>">
<div class="comagic-lead__work-area">
<div>
<div class="comagic-lead__info-area">
<div>
<% if (is_image) { %>
<div class="comagic-lead__image">
<img src='<%- image_url %>'>
</div>
<% } %>
<div class="comagic-lead__title" style="color: #<%- button_color_mobile %>">
<%- banner_title %>
</div>
<div class="comagic-lead__message">
<%- banner_text %>
</div>
</div>
</div>
</div>
<div class="comagic-lead__fields-wrapper">
<div class="comagic-lead__field-container">
<div class="comagic-lead__field-wrapper comagic-phone-field comagic-error--hidden">
<div class="comagic-lead__error-icon"></div>
<input class="comagic-lead__field__input" type="tel" c-mask="+7 (___) ___-__-__" c-name="phone" c-type="numberfield"
<% var fieldPlaceholder = 'Телефон' %>
<% var validator = 'phone' %>
<% if (validator) { %>
<%- validator+=" required" %> <%- fieldPlaceholder+="*" %>
<% } %>
c-validator="<%- validator %>"
placeholder="<%- fieldPlaceholder %>"
>
<div class="comagic-lead__error-tooltip">Введите номер</div>
</div>
</div>
<% if (is_groups_enabled) { %>
<div class="comagic-lead__field-container">
<div class="comagic-lead__field-wrapper comagic-combobox-field comagic-combobox-field--group comagic-error--hidden">
<div class="comagic-lead__error-icon"></div>
<input tabindex="-1" unselectable="on" class="comagic-lead__field__input comagic-lead__field__input--select"c-name="group_id" c-type="field" c-validator="required" readonly="readonly" placeholder="<%- group_title %>*">
<select tabindex="-1" unselectable="on" class="comagic-lead__field__select">
<% allowed_groups.forEach(function(group) { %><option value="<%- group.id %>"><%- group.name %></option><% }); %>
</select>
<div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
</div>
</div>
<% } %>
<% if (delayed_call_times) { %>
<div class="comagic-call-generator__block-delayed-call">
<div class="comagic-lead__field-container">
<div class="comagic-lead__field-wrapper comagic-combobox-field comagic-call-generator__field-delayed-call-day comagic-error--hidden">
<div class="comagic-lead__error-icon"></div>
<input tabindex="-1" unselectable="on" c-name="delayed_call_day" class="comagic-lead__field__input comagic-lead__field__input--select comagic-call-generator__field-delayed-call-day__input" c-name="delayed_call_day" c-validator="required" readonly="readonly" placeholder="День*">
<select tabindex="-1" unselectable="on" c-name="delayed_call_day" c-type="field" class="comagic-lead__field__select comagic-call-generator__field-delayed-call-day__select" c-name="delayed_call_day" c-validator="required"></select>
<div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
</div>
</div>
<div class="comagic-lead__field-container">
<div class="comagic-lead__field-wrapper comagic-combobox-field comagic-call-generator__field-delayed-call-time comagic-error--hidden">
<div class="comagic-lead__error-icon"></div>
<input tabindex="-1" unselectable="on" c-name="delayed_call_time" class="comagic-lead__field__input comagic-lead__field__input--select comagic-call-generator__field-delayed-call-time__input" c-name="delayed_call_time" c-validator="required" readonly="readonly" placeholder="Время*">
<select tabindex="-1" unselectable="on" c-name="delayed_call_time" c-type="field" class="comagic-lead__field__select comagic-call-generator__field-delayed-call-time__select" c-name="delayed_call_time" c-validator="required"></select>
<div class="comagic-lead__error-tooltip">Необходимо заполнить</div>
</div>
</div>
</div>
<% } %>
</div>
</div>
<div <% if (widget_link_text || (delayed_call_times && is_schedule_active)) { %> class="comagic-lead__footer-area" <% } %>>
<% if (delayed_call_times && is_schedule_active) { %>
<a class="comagic-lead__link comagic-call-generator__linkbutton-delayed-call"></a>
<% } %>
</div>
<div class="comagic-lead__button-area">
<a tabindex="0" class="comagic-lead__main-button" style="background-color: #<%- button_color_mobile %>">
<span><%- button_text %></span>
</a>
</div>
<div class="comagic-lead__button-close"></div>
</div>
</div>