Или познакомьтесь с нами поближе
<script>
$(document).ready(function(){
let resultTable = `<div class="result-wrapper t-text">
<div class="result-title"></div>
<div class="result-title">№</div>
<div class="result-title">Услуга</div>
<div class="result-title">Стоимсть за кв.м</div>
<div class="result-title">Кол-во кв.м</div>
<div class="result-title">Стоимость итого</div>
<div class="result-title">Срок исполнения, раб.дней</div>
<div class="result-01_0"><div class="active-line boxes"></div></div>
<div class="active-line result-01_1">1</div>
<div class="active-line result-01_2">Замер объекта, проработка технического задания на проектирование</div>
<div class="active-line result-01_3">190</div>
<div class="active-line result-01_4"><input class="t-input" ></div>
<div class="active-line result-01_5">0</div>
<div class="active-line result-01_6">2</div>
<div class="result-02_0"><div class="active-line boxes"></div></div>
<div class="active-line result-02_1">2</div>
<div class="active-line result-02_2">Разработка идеального планировочного решения (план расположения стен и мебели с ее размерами)</div>
<div class="active-line result-02_3">380</div>
<div class="active-line result-02_4"><input class="t-input" ></div>
<div class="active-line result-02_5">0</div>
<div class="active-line result-02_6">4</div>
<div class="result-03_0"><div class="active-line boxes"></div></div>
<div class="active-line result-03_1">3</div>
<div class="active-line result-03_2">Концепция и фотореалистичная 3Д визуализация помещений с подбором мебели согласно бюджету заказчика</div>
<div class="active-line result-03_3">3 300</div>
<div class="active-line result-03_4"><input class="t-input" ></div>
<div class="active-line result-03_5">0</div>
<div class="active-line result-03_6"></div>
<div class="result-separator_0"></div>
<div class="result-separator_1"></div>
<div class="result-separator_2">Чертежи: </div>
<div class="result-separator_3"></div>
<div class="result-separator_4"></div>
<div class="result-separator_5"></div>
<div class="result-separator_6"></div>
<div class="result-04_0"><div class="active-line boxes"></div></div>
<div class="active-line result-04_1">4</div>
<div class="active-line result-04_2">Обмерочный план</div>
<div class="active-line result-04_3">70</div>
<div class="active-line result-04_4"><input class="t-input" ></div>
<div class="active-line result-04_5">0</div>
<div class="active-line result-04_6">2</div>
<div class="result-05_0"><div class="active-line boxes"></div></div>
<div class="active-line result-05_1">5</div>
<div class="active-line result-05_2">План монтажа (стен, перегородок, ниш…)</div>
<div class="active-line result-05_3">70</div>
<div class="active-line result-05_4"><input class="t-input" ></div>
<div class="active-line result-05_5">0</div>
<div class="active-line result-05_6">2</div>
<div class="result-06_0"><div class="active-line boxes"></div></div>
<div class="active-line result-06_1">6</div>
<div class="active-line result-06_2">План освещения и ведомость осветительного оборудования с планом выключателей</div>
<div class="active-line result-06_3">350</div>
<div class="active-line result-06_4"><input class="t-input" ></div>
<div class="active-line result-06_5">0</div>
<div class="active-line result-06_6">5</div>
<div class="result-07_0"><div class="active-line boxes"></div></div>
<div class="active-line result-07_1">7</div>
<div class="active-line result-07_2">План розеток</div>
<div class="active-line result-07_3">270</div>
<div class="active-line result-07_4"><input class="t-input" ></div>
<div class="active-line result-07_5">0</div>
<div class="active-line result-07_6">4</div>
<div class="result-08_0"><div class="active-line boxes"></div></div>
<div class="active-line result-08_1">8</div>
<div class="active-line result-08_2">План дверей</div>
<div class="active-line result-08_3">100</div>
<div class="active-line result-08_4"><input class="t-input" ></div>
<div class="active-line result-08_5">0</div>
<div class="active-line result-08_6">2</div>
<div class="result-09_0"><div class="active-line boxes"></div></div>
<div class="active-line result-09_1">9</div>
<div class="active-line result-09_2">План полов</div>
<div class="active-line result-09_3">100</div>
<div class="active-line result-09_4"><input class="t-input" ></div>
<div class="active-line result-09_5">0</div>
<div class="active-line result-09_6">3</div>
<div class="result-10_0"><div class="active-line boxes"></div></div>
<div class="active-line result-10_1">10</div>
<div class="active-line result-10_2">План потолков</div>
<div class="active-line result-10_3">200</div>
<div class="active-line result-10_4"><input class="t-input" ></div>
<div class="active-line result-10_5">0</div>
<div class="active-line result-10_6">4</div>
<div class="result-11_0"><div class="active-line boxes"></div></div>
<div class="active-line result-11_1">11</div>
<div class="active-line result-11_2">План сантехники</div>
<div class="active-line result-11_3">130</div>
<div class="active-line result-11_4"><input class="t-input" ></div>
<div class="active-line result-11_5">0</div>
<div class="active-line result-11_6">3</div>
<div class="result-12_0"><div class="active-line boxes"></div></div>
<div class="active-line result-12_1">12</div>
<div class="active-line result-12_2">План отопления</div>
<div class="active-line result-12_3">130</div>
<div class="active-line result-12_4"><input class="t-input" ></div>
<div class="active-line result-12_5">0</div>
<div class="active-line result-12_6">3</div>
<div class="result-13_0"><div class="active-line boxes"></div></div>
<div class="active-line result-13_1">13</div>
<div class="active-line result-13_2">Развертки стен</div>
<div class="active-line result-13_3">1100</div>
<div class="active-line result-13_4"><input class="t-input" ></div>
<div class="active-line result-13_5">0</div>
<div class="active-line result-13_6">0</div>
<div class="result-14_0"><div class="active-line boxes"></div></div>
<div class="active-line result-14_1">14</div>
<div class="active-line result-14_2">Чертежи раскладки плитки</div>
<div class="active-line result-14_3">1100</div>
<div class="active-line result-14_4"><input class="t-input" ></div>
<div class="active-line result-14_5">0</div>
<div class="active-line result-14_6">0</div>
<div class="result-15_0"><div class="active-line boxes"></div></div>
<div class="active-line result-15_1">15</div>
<div class="active-line result-15_2">Адаптация проектов смежников (инженерные сети, отопление, вентиляция)</div>
<div class="active-line result-15_3">530</div>
<div class="active-line result-15_4"><input class="t-input" ></div>
<div class="active-line result-15_5">0</div>
<div class="active-line result-15_6"></div>
<div class="result-16_0"><div class="active-line boxes"></div></div>
<div class="active-line result-16_1">16</div>
<div class="active-line result-16_2">Спецификация мебели, освещения, отделочных материалов</div>
<div class="active-line result-16_3">1050</div>
<div class="active-line result-16_4"><input class="t-input" ></div>
<div class="active-line result-16_5">0</div>
<div class="active-line result-16_6">15</div>
<div class="result-title-2"></div>
<div class="result-title-2"></div>
<div class="result-title-2"></div>
<div class="result-title-2"></div>
<div class="result-title-2 txtmode">Кол-во мес.</div>
<div class="result-title-2"></div>
<div class="result-title-2"></div>
<div class="result-17_0"><div class="active-line boxes"></div></div>
<div class="active-line result-17_1">17</div>
<div class="active-line result-17_2">Авторское сопровождение 1 месяц</div>
<div class="active-line result-17_3"></div>
<div class="active-line result-17_4"><input class="t-input" ></div>
<div class="active-line result-17_5"></div>
<div class="active-line result-17_6"></div>
<div class="result-18_0"><div class="active-line boxes"></div></div>
<div class="active-line result-18_1">18</div>
<div class="active-line result-18_2">Комплектация</div>
<div class="active-line result-18_3">10% от сметы проекта</div>
<div class="active-line result-18_4"><input class="t-input" ></div>
<div class="active-line result-18_5">10% от сметы проекта</div>
<div class="active-line result-18_6"></div>
<div class="result-title-3"></div>
<div class="result-title-3"></div>
<div class="result-title-3"></div>
<div class="result-title-3"></div>
<div class="result-title-3 txtmode"></div>
<div class="result-title-3"></div>
<div class="result-title-3"></div>
<div class="result-summ1_0"></div>
<div class="result-summ1_1"></div>
<div class="result-summ1_2">Стоимость дизайн-проекта с комплектацией:</div>
<div class="result-tf_5"></div>
<div class="result-tf_3"></div>
<div class="result-summ1_5"></div>
<div class="result-summ1_6"></div>
<div class="result-summ1_0"></div>
<div class="result-summ1_1"></div>
<div class="result-summ1_2">Стоимость дизайн-проекта с авторским надзором и комплектацией:</div>
<div class="result-summ1_3"></div>
<div class="result-summ2_3"></div>
<div class="result-summ1_5"></div>
<div class="result-summ1_6"></div>
<div class="result-srok1_0"></div>
<div class="result-srok1_1"></div>
<div class="result-srok1_2">Срок исполнения:</div>
<div class="result-srok1_3"></div>
<div class="result-srok2_3"></div>
<div class="result-srok1_5"></div>
<div class="result-srok1_6"></div>
</div>`;
let recommend = `
<div class="recommend-wrapper">
<div class="recommend-col">
<a href="https://youtu.be/ZtK7RIX9zvA">
<div class="recommend-btn"><span>Посмотреть видео-обзор проекта на YouTube</span></div>
<div class="recommend-img"><img src="https://static.tildacdn.com/tild6163-3263-4566-b932-626134343132/image.png"></div>
</a>
</div>
<div class="recommend-col">
<a href="https://premier-h.ru/ourworks">
<div class="recommend-btn"><span>Посмотреть реализованные проекты студии на сайте</span></div>
<div class="recommend-img"><img src="https://static.tildacdn.com/tild3434-6335-4332-b534-663938636664/image.png"></div>
</a>
</div>
</div>
`;
// Добавляем таблицу
setTimeout(function(){
$('.uc-calc-design .t-form__screen-wrapper:eq(1)').append(resultTable);
$('.uc-calc-design .t696__form-bottom-text').append(recommend);
}, 2000);
//Разрядность чисел
function divide(x, delimiter) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, delimiter || " ");
};
//При изменении в полях ввода первого шага
$('.uc-calc-design').on('input', 'input[name="square"] , input[name="month"] ', function(){
//Получаем ввод на первом шаге
let square = +$('input[name="square"]').val();
let month = +$('input[name="month"]').val();
//Простовляем площадь во все поля ввода для площади
$('.uc-calc-design .result-wrapper input').val(square);
//Проставляем месяц в 17 и 18 строку
$('.result-17_4 input').val(month);
$('.result-18_4 input').val(month);
//Считаем площадь для Чертежи раскладки плитки
$('.result-14_4 input').val(20);
//Считаем площадь для Развертки стен
$('.result-13_4 input').val(square-20);
});
//Функция суммирования позиций в таблице
function summTable(){
//Получаем ввод на первом шаге
let square = +$('input[name="square"]').val();
let month = +$('input[name="month"]').val();
//Простовляем площадь в поле итога
$('.result-tf_4').text(square);
//Считаем Срок исполнения, раб.дней 3, 13, 16 строка
$('.result-03_6').text( (4*(square/30)).toFixed() );
$('.result-13_6').text( ((square-20)/30).toFixed() );
$('.result-14_6').text( ( 20/6 ).toFixed() );
let daySumm = 0;
let cost = 0;
//Суммируем дни до 14 строки
for (let i = 1; i <= 14; i++) {
let num = '0';
if(i>9) num='';
num = num+i;
daySumm += +$('.result-'+num+'_6.active-line').text();
};
//Выводим итог суммы всех дней
$('.result-tf_6').text(daySumm+3);
//Суммируем Стоимсть за кв.м
for (let i = 1; i <= 16; i++) {
let num = '0';
if(i>9) num='';
num = num+i;
cost += +($('.result-'+num+'_3.active-line').text().replace(/[^+\d]/g, ''));
};
//Выводим Стоимсть за кв.м
$('.result-tf_3').text( divide(cost - (+$('.result-14_3.active-line').text())) );
//Считаем Авторское сопровождение 1 месяц
$('.result-17_3').text( divide( 350*square ) );
//Считаем Итог с учётом полей ввода
let summa = 0;
for (let i = 1; i <= 16; i++) {
let num = '0';
if(i>9) num='';
num = num+i;
let nominal = +($('.result-'+num+'_3').text().replace(/[^+\d]/g, '') );
let quant = +($('.result-'+num+'_4 input').val().replace(/[^+\d]/g, '') );
let nominalX = +($('.result-'+num+'_3.active-line').text().replace(/[^+\d]/g, '') );
let quantX = $('.result-'+num+'_4.active-line input').val();
if(quantX==undefined) quantX = '0';
quantX = +( quantX.replace(/[^+\d]/g, '') );
$('.result-'+num+'_5').text( divide( nominal*quant ) );
summa+= nominalX*quantX;
};
//Выводим стоимость Итого столбца
$('.result-tf_5').text( divide( summa ) );
//Считаем Авторское сопровождение 1 месяц итог
let oneMonth = 350*square* (+$('.result-17_4 input').val());
$('.result-17_5').text( divide( oneMonth ) );
//Сумма за дизайн проект ИТОГО:
$('.result-summ1_3').text( divide( summa+ +($('.result-17_5.active-line').text().replace(/[^+\d]/g, '') ) ) );
//Сумма за дизайн проект за 1 кв.м.:
$('.result-summ2_3').text( divide( ((summa+oneMonth)/square).toFixed(0) ) );
//Срок исполнения дней:
$('.result-srok1_3').text( divide( daySumm+3 ) );
//Срок исполнения месяцев:
$('.result-srok2_3').text( divide( ((daySumm+3)/20).toFixed(1) ) );
};
//При изменении в полях ввода
$(document).on('input', 'input[name="square"] , input[name="month"] , .uc-calc-design .result-wrapper input', function(){
this.value = this.value.replace(/[^0-9]/g, '');
console.log(123);
summTable();
});
//При клике на чекбокс таблицы
$('.uc-calc-design').on('click', '.boxes', function(){
$(this).toggleClass('active-line');
let classAttr = $(this).parent('div').attr('class');
classAttr = '.'+classAttr.split('_')[0];
$(classAttr+'_1').toggleClass('active-line');
$(classAttr+'_2').toggleClass('active-line');
$(classAttr+'_3').toggleClass('active-line');
$(classAttr+'_4').toggleClass('active-line');
$(classAttr+'_5').toggleClass('active-line');
$(classAttr+'_6').toggleClass('active-line');
summTable();
});
//При клике на кнопку далее
$('.uc-calc-design').on('click', '.t-form__screen-btn-next , .t-form__screen-btn-prev', function(){
setTimeout(function(){
//Вычисляем номер шага
let step = +$('.uc-calc-design .t-form__screen-number_opacity').text();
//Если это последний шаг, то запоняем форму итоговыми параметрами
if(step==3){
let result = '';
for (let i = 1; i <= 18; i++) {
let num = '0';
if(i>9) num='';
num = num+i;
let number = +$('.result-'+num+'_1.active-line').text();
if(number!=0){
let col = $('.result-'+num+'_4.active-line input').val();
result+= '№'+number+'= '+col+'; ';
};
};
let sm = $('.result-summ1_3').text();
let srk = $('.result-srok1_3').text();
result +='|| Стоимость= '+sm+' || Срок= '+srk;
$('input[name="result"]').val(result);
$('.t696__form-bottom-text').show();
}else{
$('.t696__form-bottom-text').hide();
};
}, 1000);
});
});
</script>
<style>
.result-wrapper {
display: grid;
grid-template-columns: 45px 45px 1fr 100px 100px 100px 130px;
font-size: 13px;
overflow: auto;
padding: 5px;
box-sizing: border-box;
}
.uc-calc-design .t-form__inputsbox {
max-width: none;
}
.result-title {
background-color: #e2e2e2;
}
.result-wrapper>div {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8px 5px;
/*box-shadow: 0 0 0 1px #d1d1d1;*/
margin-left:1px;
margin-top:1px;
}
div[class^="result-separator_"],
.result-wrapper>div.result-title-2{
box-shadow: none;
}
.result-wrapper>div[class^="result-summ"],
.result-wrapper>div[class^="result-srok"]
{
box-shadow: none;
}
.result-wrapper>div.result-separator_2,
.result-wrapper>div.result-title-2.txtmode
{
/*box-shadow: 0 0 0 1px #d1d1d1;*/
font-weight: 600;
}
.result-wrapper>div.result-tf_3,
.result-wrapper>div.result-tf_4,
.result-wrapper>div.result-tf_5,
.result-wrapper>div.result-tf_6
{
font-weight: 600;
}
.result-wrapper>div.result-summ1_2,
.result-wrapper>div.result-summ1_3,
.result-wrapper>div.result-summ2_2,
.result-wrapper>div.result-summ2_3,
.result-wrapper>div.result-srok1_2,
.result-wrapper>div.result-srok1_3,
.result-wrapper>div.result-srok2_2,
.result-wrapper>div.result-srok2_3
{
/*box-shadow: 0 0 0 1px #d1d1d1;*/
font-weight: 600;
}
.result-wrapper>div.result-summ1_2,
.result-wrapper>div.result-summ2_2,
.result-wrapper>div.result-srok1_2,
.result-wrapper>div.result-srok2_2
{
justify-content: flex-end;
padding-right: 5px;
justify-content: flex-start;
padding-right: 5px;
text-align: left;
}
.uc-calc-design .result-wrapper input {
box-shadow: 0 0 0 1px #c1bbb7;
height: 30px;
width: 55px;
border-radius: 5px;
background-color: #f7f7f7;
font-size: 12px;
padding: 0 10px;
text-align: center;
}
.result-wrapper>div.result-tf_0,
.result-wrapper>div.result-tf_1,
.result-wrapper>div.result-tf_2,
.result-wrapper>div.result-17_6,
.result-wrapper>div.result-18_6
{
box-shadow: none;
}
.result-wrapper>div.result-01_2,
.result-wrapper>div.result-02_2,
.result-wrapper>div.result-03_2,
.result-wrapper>div.result-04_2,
.result-wrapper>div.result-05_2,
.result-wrapper>div.result-06_2,
.result-wrapper>div.result-07_2,
.result-wrapper>div.result-08_2,
.result-wrapper>div.result-09_2,
.result-wrapper>div.result-10_2,
.result-wrapper>div.result-11_2,
.result-wrapper>div.result-12_2,
.result-wrapper>div.result-13_2,
.result-wrapper>div.result-14_2,
.result-wrapper>div.result-15_2,
.result-wrapper>div.result-16_2,
.result-wrapper>div.result-17_2,
.result-wrapper>div.result-18_2
{
justify-content: flex-start;
text-align: left;
}
.result-wrapper>div[class*="_3"]:after,
.result-wrapper>div[class*="_5"]:after {
content: " ₽";
padding-left: 3px;
}
.result-wrapper>div.result-separator_3:after,
.result-wrapper>div.result-separator_5:after,
.result-wrapper>div.result-18_3:after,
.result-summ1_5:after,
.result-summ2_5:after,
.result-srok1_5:after,
.result-srok2_5:after,
.result-srok1_3:after,
.result-srok2_3:after,
.result-18_5:after
{
display:none;
}
.boxes {
width: 16px;
height: 16px;
background-image: url(https://static.tildacdn.com/tild6533-3836-4564-b565-306334393164/Vector_3.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
opacity: 0.6;
cursor: pointer;
}
.active-line.boxes {
background-image: url(https://static.tildacdn.com/tild3261-3164-4761-a332-363665666133/Vector_4.svg);
}
.result-01_0 .boxes,
.result-02_0 .boxes {
background-image: none;
pointer-events: none;
}
div[class*="result-0"], div[class*="result-1"] {
opacity: 0.3;
}
div[class*="result-0"].active-line, div[class*="result-1"].active-line {
opacity: 1;
}
.result-wrapper>div[class*="_0"] {
opacity: 1;
}
.uc-calc-design .t-input-group.t-input-group_tx {
/*display: none;*/
}
.result-srok1_3,
.result-srok2_3{
position: relative;
}
#allrecords .result-srok1_3:after {
content: "дней";
position: absolute;
display: block;
font-size: 10px;
bottom: -5px;
font-weight: 300;
}
#allrecords .result-srok2_3:after {
content: "месяцев";
position: absolute;
display: block;
font-size: 10px;
bottom: -5px;
font-weight: 300;
}
.result-title-3.txtmode {
font-weight: 600;
}
.result-title-3.txtmode {
height: 20px;
}
@media screen and (max-width:640px){
.t696__title{
font-size:26px !important;
}
.t696__descr{
font-size:18px !important;
}
.t696 button.t-btn ,
.t696 button.t-submit {
font-size: 12px;
height: 35px;
padding: 0 15px;
}
}
.result-wrapper>div.result-tf_3:after,
.result-wrapper>div.result-summ2_3:after
{
content: " ₽/кв.м.";
}
.uc-calc-design .t696__form-bottom-text {
display: none;
}
.uc-calc-design .t696 .t696__form-bottom-text {margin-top: 32px;}
.recommend-wrapper {
display: flex;
margin-top: 15px;
justify-content: space-between;
}
.recommend-col {width: 49%;overflow: hidden;}
.recommend-col a {
color: #000 !important;
}
.recommend-btn {
background-color: #e2e2e2;
padding: 10px;
font-size: 14px;
margin-bottom: 10px;
font-weight: 400;
transition: all 0.3s ease-in-out;
}
.recommend-col:hover .recommend-btn {
background-color: #cdcdcd;
}
.recommend-col:hover .recommend-img {
opacity: 0.8;
}
.recommend-img {
transition: all 0.3s ease-in-out;
}
.recommend-img img {
width: 100%;
}
@media screen and (max-width:640px){
.recommend-btn {
font-size: 10px;
padding: 6px;
}
}
@media screen and (max-width: 640px){
.t696 .t696__mainwrapper {
padding: 0;
}
.t696__content {
border: none !important;
}
.t696 .t696__content {
padding: 30px 10px;
}
.result-wrapper {
display: grid;
grid-template-columns: 25px 15px 85px 67px 78px 60px 56px;
font-size: 10px;
overflow: auto;
padding: 5px;
box-sizing: border-box;
}
}
</style>