Skip to content

Instantly share code, notes, and snippets.

@Ibochkarev

Ibochkarev/online_raschet.md

Last active April 18, 2020 22:56
Show Gist options
  • Save Ibochkarev/73c373727325f935baa40cb84c7745fb to your computer and use it in GitHub Desktop.
Save Ibochkarev/73c373727325f935baa40cb84c7745fb to your computer and use it in GitHub Desktop.
Download ZIP
Расчет кухни онлайн
Raw
online_raschet.md

** AjaxForm / Formit**

[[!AjaxForm?
  &snippet=`FormIt`
  &form=`tpl.AjaxForm.raschet`
  &hooks=`email`
  &emailTpl=`_email`
  &emailSubject=`Новый онлайн расчет кухни`
  &emailTo=`info@gmail.com`
  &_validate=`name:required,email:required,message:required`
  &validationErrorMessage=`В форме содержатся ошибки!`
  &successMessage=`Сообщение успешно отправлено`
  &validationErrorMessage=`Вам необходимо заполнить все поля`
]]

Email tpl

{if $kitchen_form?}
<strong>Форма кухни:</strong> {if $kitchen_form == 1}Прямая{elseif $kitchen_form == 2}Угловая{elseif $kitchen_form == 3}Полуостров{elseif $kitchen_form == 4}Другая{/if}<br/>
{/if}
{if $size1_form1?}
<strong>Размеры кухни по стенам:</strong> {$size1_form1} см.<br/>
{/if}
{if $size1_form2?}
<strong>Размеры кухни по стенам:</strong><br/> 
{$size1_form2} см.<br>
{/if}
{if $size2_form2?}
{$size2_form2} см.<br/>
{/if}
{if $size1_form3?}
<strong>Размеры кухни по стенам:</strong><br/> 
{$size1_form3} см.<br>
{/if}
{if $size3_form3?}
{$size3_form3} см.<br/>
{/if}
{if $size2_form3?}
{$size2_form3} см.<br/>
{/if}
{if $size1_form4?}
<strong>Размеры кухни по стенам:</strong> {$size1_form4} см.<br>
{/if}
{if $kitchen_fasad?}
<strong>Тип фасада:</strong> {$kitchen_fasad}<br>
{/if}
{if $kitchen_stol?}
<strong>Тип столешницы:</strong> {$kitchen_stol}<br>
{/if}
{if $kitchen_sten?}
<strong>Тип стеновой панели:</strong> {$kitchen_sten}<br>
{/if}
{if $kitchen_moyka?}
<strong>Тип мойки и смесителя:</strong> {$kitchen_moyka}<br>
{/if}
{if $kitchen_furn?}
<strong>Класс фурнитуры:</strong> {$kitchen_furn}<br>
{/if}
{if $surprice?}
<strong>Подарок:</strong> {$surprice}<br>
{/if}
{if $comment?}
<strong>Комментарий:</strong> {$comment}<br>
{/if}
{if $fio?}
<strong>ФИО:</strong> {$fio}<br>
{/if}
{if $phone?}
<strong>Номер телефона:</strong> {$phone}<br>
{/if}

Form

<form action="" method="post" class="ajax_form" id="form" name="calc_form">
    <p>
      Если у вас есть чертеж будущей кухни, отправьте его нам на
      <a href="mailto:order@xxx.ru">order@xxx.ru</a> и
      мы ответим в течение 1 часа, или рассчитайте стоимость вашей кухни
      ниже.
    </p>
    <div class="calc_blocks">
      <div class="cb" id="cb1">
        <div class="cb_name arrow_up">
          <span>Выберите форму кухни</span>
          <div class="cb_showhide arrow_up" rel="cb1"></div>
        </div>
        <div class="cb_options" style="display: block;">
          <div class="cb_option cb_form cur">
            <input
              type="radio"
              name="kitchen_form"
              value="1"
              checked="checked"
            />
            <span>Прямая</span>
            <img src="/assets/images/calc/pryamaya.png" />
          </div>
          <div class="cb_option cb_form">
            <input type="radio" name="kitchen_form" value="2" />
            <span>Угловая</span>
            <img src="/assets/images/calc/uglovaya.png" />
          </div>
          <div class="cb_option cb_form">
            <input
              type="radio"
              name="kitchen_form"
              value="3"
            />
            <span>Полуостров</span>
            <img src="/assets/images/calc/ostrovnaya.png" />
          </div>
          <div class="cb_option cb_form">
            <input type="radio" name="kitchen_form" value="4" />
            <span>Другая</span>
            <img src="/assets/images/calc/drugaya.png" />
          </div>
          <div class="cl"></div>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb" id="cb2">
        <div class="cb_name">
          <span>Введите размеры кухни по стенам</span>
          <div class="cb_showhide" rel="cb2"></div>
        </div>
        <div class="cb_options">
          <div
            class="budjtext"
            style="
              text-align: center;
              padding: 15px 0 10px 0;
              color: #828282;
            "
          >
            Ниже укажите размеры по стенам в сантиметрах
          </div>
          <div class="cb_option cb_sizes pryamaya cur" id="form_id1">
            <span class="center">
              <input type="text" name="size1_form1" maxlength="5" /> см.
            </span>
            <div class="cl"></div>
            <img src="/assets/images/calc/pryamaya.png" />
            <div class="cl"></div>
          </div>
          <div class="cb_option cb_sizes uglovaya" id="form_id2">
            <span class="left">
              <input type="text" name="size1_form2" maxlength="5" /> см.
            </span>
            <span class="center">
              <input type="text" name="size2_form2" maxlength="5" /> см.
            </span>
            <div class="cl"></div>
            <img src="/assets/images/calc/uglovaya.png" />
            <div class="cl"></div>
          </div>
          <div class="cb_option cb_sizes ostrovnaya" id="form_id3">
            <span class="left">
              <input type="text" name="size1_form3" maxlength="5" /> см.
            </span>
            <span class="right">
              <input type="text" name="size3_form3" maxlength="5" /> см.
            </span>
            <span class="center">
              <input type="text" name="size2_form3" maxlength="5" /> см.
            </span>
            <div class="cl"></div>
            <img src="/assets/images/calc/ostrovnaya.png" />
            <div class="cl"></div>
          </div>
          <div class="cb_option cb_sizes drugaya" id="form_id4">
            <span class="center"
              >общая длина гарнитура
              <input type="text" name="size1_form4" maxlength="5" />
              см.</span
            >
            <div class="cl"></div>
            <img src="/assets/images/calc/drugaya.png" />
            <div class="cl"></div>
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb fasadblock" id="cb3">
        <div class="cb_name">
          <span>Выберите тип фасадов</span>
          <div class="cb_showhide" rel="cb3"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_fasady cur">
            <input
              type="radio"
              name="kitchen_fasad"
              value="плёнка"
            /><span>плёнка</span>
            <img src="/assets/images/calc/fasad_plenka.jpg" />
            <!-- <a
              target="blank"
              href="/cat_MDF__plenka_67"
              title="Кухни с фасадами, облицованными плёнкой ПВХ"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input type="radio" name="kitchen_fasad" value="пластик" />
            <span>пластик</span>
            <img src="/assets/images/calc/fasad_plastik.jpg" />
            <!-- <a
              target="blank"
              href="/cat_Plastikovie_kuhni_75"
              title="Кухни с фасадами, облицованными пластиком"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input type="radio" name="kitchen_fasad" value="эмаль" />
            <span>эмаль</span>
            <img src="/assets/images/calc/fasad_emal.jpg" />
            <!-- <a
              target="blank"
              href="/cat_Emalirovannie_kuhni_76"
              title="Кухни с эмалированными фасадами"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input type="radio" name="kitchen_fasad" value="акрил" />
            <span>акрил</span>
            <img src="/assets/images/calc/fasad_akril.jpg" />
            <!-- <a
              target="blank"
              href="/cat_Akril_148"
              title="Кухни с фасадами из акрилловых панелей"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input type="radio" name="kitchen_fasad" value="шпон" />
            <span>шпон</span>
            <img src="/assets/images/calc/fasad_shpon.jpg" />
            <!-- <a
              target="blank"
              href="/cat_SHponirovanie_kuhni_119"
              title="Кухни с фасадами, облицованными натуральным шпоном"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input type="radio" name="kitchen_fasad" value="массив" />
            <span>массив</span>
            <img src="/assets/images/calc/fasad_massiv.jpg" />
            <!-- <a
              target="blank"
              href="/cat_Derevyannie_kuhni_150"
              title="Кухни с фасадами из натурального дерева"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a> -->
          </div>
          <div class="cb_option cb_fasady">
            <input
              type="radio"
              name="kitchen_fasad"
              value="не знаю"
              checked="checked"
            />
            <span>не знаю</span>
            <img src="/assets/images/calc/somneniya.jpg" />
            <a target="blank" href="/catalog/" title="Весь каталог"
              >смотреть кухни&nbsp;<i class="icon-right-open-mini"></i
            ></a>
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb" id="cb4">
        <div class="cb_name">
          <span>Выберите тип столешницы</span>
          <div class="cb_showhide" rel="cb4"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_stol cur">
            <input
              type="radio"
              name="kitchen_stol"
              value="ДСП 28 мм. эконом"
            />
            <span>ДСП 28 мм. эконом</span>
            <img src="/assets/images/calc/stol_ekonom.jpg" />
          </div>
          <div class="cb_option cb_stol">
            <input
              type="radio"
              name="kitchen_stol"
              value="ДСП 38 мм. стандарт"
              checked="checked"
            />
            <span>ДСП 38 мм. стандарт</span>
            <img src="/assets/images/calc/stol_standart.jpg" />
          </div>
          <div class="cb_option cb_stol">
            <input
              type="radio"
              name="kitchen_stol"
              value="искусственный камень"
            />
            <span>искусственный камень</span>
            <img src="/assets/images/calc/stol_kamen.jpg" />
          </div>
          <div class="cb_option cb_stol">
            <input
              type="radio"
              name="kitchen_stol"
              value="не могу выбрать"
            />
            <span>не могу<br />выбрать</span>
            <img src="/assets/images/calc/somneniya.jpg" />
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb" id="cb5">
        <div class="cb_name">
          <span>Выберите тип стеновой панели</span>
          <div class="cb_showhide" rel="cb5"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_sten cur">
            <input
              type="radio"
              name="kitchen_sten"
              value="ДСП"
              checked="checked"
            />
            <span><br />ДСП</span>
            <img src="/assets/images/calc/sten_dsp.jpg" />
          </div>
          <div class="cb_option cb_sten">
            <input
              type="radio"
              name="kitchen_sten"
              value="искусственный камень"
            />
            <span>искусственный камень</span>
            <img src="/assets/images/calc/stol_kamen.jpg" />
          </div>
          <div class="cb_option cb_sten">
            <input
              type="radio"
              name="kitchen_sten"
              value="без стеновой"
            />
            <span><br />без стеновой</span>
            <img src="/assets/images/calc/sten_net.jpg" />
          </div>
          <div class="cb_option cb_sten">
            <input
              type="radio"
              name="kitchen_sten"
              value="не могу выбрать"
            />
            <span>не могу<br />выбрать</span>
            <img src="/assets/images/calc/somneniya.jpg" />
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb" id="cb6">
        <div class="cb_name">
          <span>Выберите тип мойки и смесителя</span>
          <div class="cb_showhide" rel="cb6"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_moyka cur">
            <input
              type="radio"
              name="kitchen_moyka"
              value="нержавейка"
              checked="checked"
            />
            <span><br />нержавейка</span>
            <img src="/assets/images/calc/moyka_nerjav.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="kitchen_moyka"
              value="гранитная"
            />
            <span><br />гранитная</span>
            <img src="/assets/images/calc/moyka_granit.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="kitchen_moyka"
              value="без мойки и смесителя"
            />
            <span>без мойки<br />и смесителя</span>
            <img src="/assets/images/calc/moyka_net.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="kitchen_moyka"
              value="не могу выбрать"
            />
            <span>не могу<br />выбрать</span>
            <img src="/assets/images/calc/somneniya.jpg?v5" />
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">следующий шаг &rarr;</button>
        </div>
      </div>
      <div class="cb" id="cb7">
        <div class="cb_name">
          <span>Выберите класс фурнитуры</span>
          <div class="cb_showhide" rel="cb7"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_moyka cur">
            <input
              type="radio"
              name="kitchen_furn"
              value="эконом"
              checked="checked"
            />
            <span><br />эконом</span>
            <img src="/assets/images/calc/furn_ekonom.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="kitchen_furn" value="стандарт" />
            <span><br />стандарт</span>
            <img src="/assets/images/calc/furn_standart.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="kitchen_furn"
              value="стандарт +"
            />
            <span><br />стандарт +</span>
            <img src="/assets/images/calc/furn_standart_plus.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="kitchen_furn" value="премиум" />
            <span><br />премиум</span>
            <img src="/assets/images/calc/furn_premium.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="kitchen_furn"
              value="не могу выбрать"
            />
            <span>не могу<br />выбрать</span>
            <img src="/assets/images/calc/furn_idontknow.jpg" />
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next">дальше</button>
        </div>
      </div>
      <div class="cb" id="cb9">
        <div class="cb_name">
          <span>Выберите ваш подарок</span>
          <div class="cb_showhide" rel="cb9"></div>
        </div>
        <div class="cb_options">
          <div class="cb_option cb_moyka cur">
            <input
              type="radio"
              name="surprice"
              value="Мойка"
              checked="checked"
            />
            <span><br />Мойка</span>
            <img src="/assets/images/calc/sur1.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="surprice" value="Рейлинг" />
            <span><br />Рейлинг</span>
            <img src="/assets/images/calc/sur2.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="surprice" value="Столешница" />
            <span><br />Столешница</span>
            <img src="/assets/images/calc/sur3.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="surprice" value="Органайзер" />
            <span><br />Органайзер</span>
            <img src="/assets/images/calc/sur4.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input type="radio" name="surprice" value="Доска" />
            <span><br />Доска</span>
            <img src="/assets/images/calc/sur5.jpg" />
          </div>
          <div class="cb_option cb_moyka">
            <input
              type="radio"
              name="surprice"
              value="не могу выбрать"
            />
            <span>не могу<br />выбрать</span>
            <img src="/assets/images/calc/somneniya.jpg" />
          </div>
          <div class="cl"></div>
          <button class="cb_prev">назад</button>
          <button class="cb_next lastshag_butt">
            следующий шаг &rarr;
          </button>
        </div>
      </div>
      <div class="cb" id="cb10">
        <div class="cb_name">
          <span>Дополнительная информация</span>
          <div class="cb_showhide" rel="cb10"></div>
        </div>
        <div class="cb_options">
          <div class="cl"></div>
          <!-- left_lastf -->
          <div class="left_lastf">
            <div class="cl"></div>
            <div id="formbox" class="formboxx">
              <div class="comments">
                <textarea
                  name="comment"
                  placeholder="Любые комментарии и дополнительную информацию, которую необходимо учесть при расчете, вы можете указать здесь"
                ></textarea>
              </div>
              <div class="name">
                <input
                  type="text"
                  name="fio"
                  class="input_zamer"
                  placeholder="ФИО"
                />
              </div>
              <div class="phone">
                <input
                  type="tel"
                  name="phone"
                  class="input_zamer"
                  placeholder="8 (___) ___-____"
                  style="
                    font-size: 17px;
                    padding-left: 10px;
                    margin-top: 20px;
                    border: 2px solid #ccc;
                    width: 274px !important;
                    height: 40px !important;
                  "
                />
              </div>
            </div>
            <div class="submit_but">
              <input
                type="submit"
                name="send_zamer"
                value="отправить на расчёт &rarr;"
                class="submit_butt_zamer"
              />
            </div>
            <div class="cl"></div>
          </div>
          <!--  left_lastf END -->
          <div class="cl"></div>
        </div>
      </div>
    </div>


    [[+fi.success:is=`1`:then=`
    <div class="alert alert-success">[[+fi.successMessage]]</div>
    `]]
    [[+fi.validation_error:is=`1`:then=`
    <div class="alert alert-danger">[[+fi.validation_error_message]]</div>
    `]]
</form>

JS

$(document).ready(function () {
  $(".cb_showhide").bind("click", function () {
    cb = $(this).attr("rel");
    $("#" + cb + " .cb_options").slideToggle(200);
    $("#" + cb + " .cb_name").toggleClass("arrow_up");
    $(this).toggleClass("arrow_up");
  });
  $(".cb_showhide")
    .prev()
    .bind("click", function () {
      cb = $(this).next().attr("rel");
      $("#" + cb + " .cb_options").slideToggle(200);
      $("#" + cb + " .cb_name").toggleClass("arrow_up");
      $("#" + cb + " .cb_name")
        .children(".cb_showhide")
        .toggleClass("arrow_up");
    });

  $(".cb_next").bind("click", function (event) {
    event.preventDefault();
    next_id = $(this).parent().parent().next().attr("id");
    this_id = $(this).parent().parent().attr("id");
    $(this).parent().prev().toggleClass("arrow_up");
    $(this).parent().prev().children(".cb_showhide").toggleClass("arrow_up");
    $("#" + next_id).toggleClass("arrow_up");
    $("#" + next_id + " .cb_name").toggleClass("arrow_up");
    $("#" + next_id + " .cb_name")
      .children(".cb_showhide")
      .toggleClass("arrow_up");
    $(this)
      .parent()
      .slideUp(200, function () {
        $("#" + next_id + " .cb_options").slideDown(200);
        //$('html, body').animate({scrollTop: $('#'+this_id).offset().top-($('#'+this_id).height()*3)}, 100);
      });
  });

  $(".cb_prev").bind("click", function (event) {
    event.preventDefault();
    prev_id = $(this).parent().parent().prev().attr("id");
    this_id = $(this).parent().parent().attr("id");
    $(this).parent().prev().toggleClass("arrow_up");
    $(this).parent().prev().children(".cb_showhide").toggleClass("arrow_up");
    $("#" + prev_id).toggleClass("arrow_up");
    $("#" + prev_id + " .cb_name").toggleClass("arrow_up");
    $("#" + prev_id + " .cb_name")
      .children(".cb_showhide")
      .toggleClass("arrow_up");

    $(this)
      .parent()
      .slideUp(200, function () {
        $("#" + prev_id + " .cb_options").slideDown(200);
        //$('html, body').animate({scrollTop: $('#'+this_id).offset().top-($('#'+this_id).height()*7)}, 100);
      });
  });

  $(".cb_form").bind("click", function () {
    form_id = $(this).children("input").val();
    $(".cb_sizes").removeClass("cur");
    $("#form_id" + form_id).addClass("cur");
  });

  $(".chertej_form").bind("click", function () {
    $(".cb_calc").fadeOut(200, function () {
      $(".form_na_rasschet").fadeIn(200);
    });
  });

  $(".calc_form").bind("click", function () {
    $(".form_na_rasschet").fadeOut(200, function () {
      $(".cb_calc").fadeIn(200);
    });
  });

  $(".cb_option").bind("click", function () {
    parent_id = $(this).parent().parent().attr("id");
    $("#" + parent_id + " .cur").removeClass("cur");
    $(this).addClass("cur");
  });

  var show_last_shag = 0;
  $('[rel="cb9"]')
    .prev()
    .bind("click", function () {
      if (!!$('[rel="cb9"]').hasClass("arrow_up")) {
        if (show_last_shag == 0) {
          show_last_shag = 1;
        }
      }
    });

  $('[rel="cb9"]').bind("click", function () {
    if (!!$('[rel="cb9"]').hasClass("arrow_up")) {
      if (show_last_shag == 0) {
        show_last_shag = 1;
      }
    }
  });
});

Styles

.calc_form,
.chertej_form {
    color: #e04b4b;
    cursor: pointer
}

.cb_options,
.form_na_rasschet {
    display: none
}

.cb_calc{
    margin: 20px;
    padding: 18px;
}
.calc_blocks {
    margin-top: 30px
}

.calc_form:hover {
    text-decoration: none
}

.cb_name {
    font-family: bebas neue, Trebuchet MS;
    color: #a4a3a2!important;
    font-size: 25px!important;
    line-height: 25px;
    text-transform: uppercase;
    letter-spacing: .05em;
    position: relative;
    z-index: 1;
    border-bottom: 1px dotted #a4a3a2;
    margin: 0 0 18px
}

.cb_options .cb_fasady span,
.cb_options .cb_next,
.cb_prev {
    font-family: bebas_neuebold, bebas neue, Trebuchet MS;
    text-transform: uppercase
}

.cb_name span {
    padding: 0 4px 3px 0;
    background: #fff;
    cursor: pointer
}

.cb_options {
    margin: 0 0 40px;
    min-height: 130px;
}

.cb_options .cb_next,
.cb_prev {
    height: 40px;
    line-height: 25px;
    font-size: 25px;
    letter-spacing: .06em;
    padding: 8px 40px 13px;
    border: none;
    margin: 40px 20px 0 0
}

.arrow_up {
    background-position: 5px 0!important;
    color: #e83e38!important
}

.cb_options .cb_fasady span,
.cb_prev {
    color: #fff
}

.cb_options button {
    cursor: pointer
}

.cb_prev {
    background: silver;
    cursor: pointer
}

.cb_options .cb_next {
    background: #e83e38;
    color: #fff!important
}

.cb_options .cb_option {
    float: left;
    color: #000;
    border: 1px dotted #fff;
    margin: 20px 20px 0 0
}

.cb_options .cb_fasady.cur,
.cb_options .cb_fasady:hover,
.cb_options .cb_form.cur,
.cb_options .cb_form:hover,
.cb_options .cb_furn.cur,
.cb_options .cb_furn:hover,
.cb_options .cb_moyka.cur,
.cb_options .cb_moyka:hover,
.cb_options .cb_sten.cur,
.cb_options .cb_sten:hover,
.cb_options .cb_stol.cur,
.cb_options .cb_stol:hover {
    border: 1px dotted #e83e38
}

#cb1 .cb_showhide{
display:block!important;
}

.cb_showhide {
display:none;
    width: 30px;
    height: 25px;
    background: url(/assets/images/calc/showhide.png) 5px -25px no-repeat #fff;
    position: absolute;
    left: 100%;
    padding: 0 0 0 5px;
    margin: -12px 0 0 -25px;
    cursor: pointer
}

.cb_options .cb_form {
    width: 190px;
    height: 190px;
    padding: 19px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer
}



.cb_options [type=radio] {
    display: block;
    position: absolute;
    width: 130px;
    height: 130px;
    margin: -10px 0 0 -10px;
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2
}

.cb_options .cb_form [type=radio] {
    width: 190px!important;
    height: 190px!important;
    margin: -20px 0 0 -20px
}

.cb_options .cb_form span {
    padding: 5px 0 25px;
    display: block;
    color: #000
}

.cb_options .cb_form img {
    width: 152px
}

.cb_options .cb_sizes {
    display: none;
    box-sizing: border-box;
    text-align: center;
    float: none;
    margin: -20px auto 0
}

.cb_options input {
    border: none;
    border-bottom: 1px solid #a4a3a2;
    font-size: 18px;
    width: 60px;
    outline: 0;
    text-align: center;
    position: relative;
    z-index: 2
}


.cb_options .cb_sizes .center {
    display: block;
    margin: 60px auto 20px;
    color: #a4a3a2;
    font-size: 18px
}

.cb_options .cb_sizes .left {
position: absolute;
    display: block;
    margin: 170px 0 0px -330px;
    color: #a4a3a2;
    font-size: 18px;
    height: 30px;
    width: 100px;
    left: 50%;
}

.cb_options .cb_sizes .right {
    position: absolute;
    display: block;
    color: #a4a3a2;
    font-size: 18px;
    width: 100px;
    height: 30px;
    margin: 170px -320px -200px 0px;
    right: 50%;
}

.cb_options .cb_sizes img {
    width: 346px;
    display: block;
    margin: 0 auto
}

.cb_options .cb_sizes.cur {
    display: block
}

.cb_options .cb_fasady {
    width: 130px;
    height: 130px;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    margin: 20px 10px 10px 0
}

.cb_options .cb_fasady a {
    display: none;
    color: #a4a3a2;
    text-decoration: none;
    position: absolute;
    margin: 6px 0 0;
    font-size: 14px
}

.cb_options .cb_fasady:hover:after {
    width: 100%;
    height: 30px;
    display: block
}

.cb_options .cb_furn,
.cb_options .cb_moyka,
.cb_options .cb_sten,
.cb_options .cb_stol {
    height: 130px;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer
}

.cb_options .cb_fasady:hover a {
    display: none;
}

.cb_options .cb_fasady a:hover {
    text-decoration: underline
}

.cb_options .cb_fasady img {
    width: 108px;
    margin: -22px 0 0
}

.cb_options .cb_fasady span {
    display: block;
    font-size: 20px;
    letter-spacing: .02em;
    text-align: center;
    width: 100%;
    padding: 0;
    position: relative;
    bottom: -80px
}

.cb_options .cb_furn span,
.cb_options .cb_moyka span,
.cb_options .cb_sten span,
.cb_options .cb_stol span {
    font-family: "RobotoBold", sans-serif;
    font-size: 12px;
    text-align: center;
    position: relative;
    bottom: -60px;
    display: block;
    color: #fff;
    text-transform: uppercase
}

.cb_options .cb_stol {
    width: 130px;
    padding: 10px;
    margin: 20px 10px 10px 0;
    min-height: 130px;
}

.cb_options .cb_stol img {
    width: 108px;
    margin: -44px 0 0
}

.cb_options .cb_stol span {
    width: 100%;
    padding: 0
}

.cb_options .cb_sten {
    width: 130px;
    padding: 10px;
    margin: 20px 10px 10px 0
}

.cb_options .cb_budj {
    width: 150px;
    padding: 10px;
    margin: 20px 10px 10px 0
}

.cb_options .cb_budj .divv {
    width: 128px;
    height:108px;
   margin: -44px 0 0; 
}

.cb_options .cb_budj span {
bottom:-40px;
font-size:20px;
}

.cb_options .cb_sten img {
    width: 108px;
    margin: -44px 0 0
}

.cb_options .cb_sten span {
    width: 100%;
    padding: 0
}

.cb_options .cb_moyka {
    width: 130px;
    padding: 10px;
    margin: 20px 10px 10px 0
}

.cb_options .cb_moyka img {
    width: 108px;
    margin: -44px 0 0
}

.cb_options .cb_moyka span {
    width: 100%;
    padding: 0
}

.cb_options .cb_furn {
    width: 130px;
    padding: 10px;
    margin: 20px 10px 10px 0
}

.cb_options .cb_furn img {
    width: 108px;
    margin: -44px 0 0
}
.cb_options .cb_furn span {
    width: 100%;
    padding: 0
}

#formbox .comments {
    margin: 20px 0
}

#formbox .email input {
    height: 30px;
    width: 380px;
    display: block;
    margin-bottom: 20px;
    padding: 0 5px;
    border: none;
    border: 1px solid #ccc
}

.cb_options #formbox input,
.form_na_rasschet input {
    font-size: 13px;
    text-align: left;
    width: auto!important;
    margin-bottom: 20px
}

.cb_options #formbox select,
.form_na_rasschet select {
    margin-bottom: 20px!important
}

#formbox .comments textarea,
.form_na_rasschet textarea {
    height: 90px;
    width: 600px;
    display: block;
    margin: 25px 0 20px;
    padding: 8px 5px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    font-size: 13px;
    line-height: 17px;
    font-family: arial;
    resize: none
}

#cb10 .submit_but input,
.form_na_rasschet .submit_but input {
    font-family: bebas_neuebold, bebas neue, Trebuchet MS;
    height: 40px;
    line-height: 25px;
    font-size: 25px;
    letter-spacing: .06em;
    padding: 8px 40px 13px;
    color: #fff;
    text-transform: uppercase;
    border: none;
    margin: 0 20px 0 0;
    cursor: pointer
}

.submit_but input{
    background-color: #f8453e;
    width: auto;
}
@Ibochkarev
Copy link
Author

moyka_nerjav
moyka_net
somneniya
sten_dsp
sten_net
stol_ekonom
stol_kamen
stol_standart
sur1
sur2
sur3
sur4
sur5
drugaya
ostrovnaya
pryamaya
showhide
uglovaya
fasad_akril
fasad_emal
fasad_massiv
fasad_plastik
fasad_plenka
fasad_shpon
furn_ekonom
furn_idontknow
furn_premium
furn_standart
furn_standart_plus
moyka_granit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment