<?php
$title=("Услуги - Умный дом от Housecontrol");
$keywords=("Проектирование умного дома, проект умного дома, программирование системы умный дом. Housecontrol");
$description=("Проектирование умного дома, программирование системы умный дом. Заказать проект умного дома в компании Housecontrol");
?>
<?php
include ("includes/header_utf.inc");
?>

<?php
include ("includes/menu_service_support_utf.inc");
?>

<?php
include ("includes/telephone_utf.inc");
?>
<tr><td>
		
<table border="0" cellpadding="0" cellspacing="0"> 	
<tr> 	

<td>
	
    <style>
	    .col-2 {
		    float: left;
		    width: 50%;
		    box-sizing: border-box;
		    padding: 30px;
	    }
	    
	    .col-2 img {
		    height: 200px;
	    }
	    .col-2 h3 {
		    height: 70px;
		    font-size: 18px;
	    }
	    
	    .style-list-1 {
		    padding: 0px;
		    padding-left: 40px;
		    counter-reset: none;
		    overflow: hidden;
	    }
	    
	    .style-list-1 li {
		    display: list-item;
		    margin: 40px 0px;
		    list-style: none;
		    min-height: 50px;
		    vertical-align: middle;
		    font-size: 14px;
		    float: left;
		    width: 46%;
		    height: 290px;
		    box-sizing: border-box;
		    margin: 2%;
		    background-color: #FFF;
		    border-radius: 10px;
		    padding: 20px;
		    position: relative;
/* 		    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); */
		    
	    }
	    
	    body{counter-reset: counter1}
	    
	    ol.style-list-1>li:before{
		    counter-increment: counter1;
		    content: counter(counter1) " ";
		    display: block;
		    font-size: 24px;
		    line-height: 40px;
		    width: 40px;
/* 		    border: solid 1px #CCC; */
		    border-radius: 80px;
		    text-align: center;
		    position: absolute;
		    top: -10px;
		    left: -10px;
		    background-color: #FFF;
	    }
	    
	    .style-list-1 img {
		    width: 120px;
		    vertical-align: middle;
		    display: block;
		    vertical-align: middle;
		    margin: 10px auto;
		    
	    }
	    
	    .style-list-1 p {
		    padding: 10px;
		    text-align: center;
	    }
	    
	    .request-box {
		    position: fixed;
			left: 0px;
			right: 0px;
			top: 0px;
			bottom: 0px;
			background-color: rgba(0, 0, 0, 0.8);
			z-index: 10;
			text-align: center;
	    }
	    
	    .request-box-content {
		    background-color: #FFF;
		    border-radius: 5px;
		    padding: 30px 50px;
		    display: inline-block;
		    text-align: left;
		    margin-top: 200px;
		    width: 300px;
		    position: relative;	
		    
	    }
	    
	    .request-box-content label {
		    display: block;
	    }
	    
	    .request-box-content input {
		     width: 250px !important;
		     margin: 15px 0px;
	    }
	    
	    .sendRequest {
		    padding: 10px;
		    background-color: #666;
		    color: #FFF;
		    text-align: center;
		    border-radius: 5px;
		    font-size: 16px;
		    cursor: pointer;
	    }
	    
	    .sendRequest:hover {
		    background-color: #333;
	    }
	    
	    .error-input {
		    border-color: #f00 !important;
	    }
	    
	    .close-modal {
		    position: absolute;
		    right: 5px;
		    top:5px;
		    
	    }
	    
	    .close-modal img {
		    width: 16px;
		    cursor: pointer;
	    }
    </style>
    <div class="mainbar" style="width: 100%; font-size: 14px;">
        
                <div class="round-wrapper">
                    <div class="summary-main1">
                        <h1>Сервисное обслуживание</h1>
                    </div>
                   
                    <div class="summary-secondary" style="padding:30px;">
						<p style="text-align: center; font-size: 21px;">Наши клиенты, заключив с нами сервисный договор, получают следующие преимущества:</p>
						<ol class="style-list-1">
							<li><img src="img/service_support/1.png" alt="1" width="" height="" /><p>Круглосуточное реагирование и консультирование по телефону при возникновении внештатной ситуации (поломка оборудования, неработоспособность систем)</p></li>
							
							<li><img src="img/service_support/4.png" alt="1" width="" height="" /><p>Выполнение заявок Заказчика: плановых, обычных, срочных и аварийных, а при возможности, посредством удаленного доступа и телефонного консультирования</p></li>
							<li><img src="img/service_support/3.png" alt="1" width="" height="" /><p>Круглосуточный мониторинг работоспособности оборудования</p></li>
							<li><img src="img/service_support/5-2.png" alt="1" width="" height="" /><p>Плановая замена элементов питания и расходных материалов </p></li>							

							<li><img src="img/service_support/2.png" alt="1" width="" height="" /><p>Проверка и тестирование всех систем, с периодичностью достаточной для нормального функционирования оборудования</p></li>


							<li><img src="img/service_support/6.png" alt="1" width="" height="" /><p>Горячая замена основных узлов системы (прописанных в приложении) в случае выхода их из строя</p></li>
							
							
							
							<li><img src="img/service_support/7.png" alt="1" width="" height="" /><p>Заблаговременное предупреждение аварийных ситуаций благодаря онлайн диагностированию системы</p></li>
							<li><img src="img/service_support/8.png" alt="1" width="" height="" /><p>Необходимое допрограммирование и мелкие настройки оборудования (не более 4-х часов работы специалиста в квартал)</p></li>
							<li><img src="img/service_support/9.png" alt="1" width="" height="" /><p>Круглосуточное выявление и реагирование в случае внешних сетевых атак, попыток несанкционированного доступа в сеть и вирусных угроз</p></li>
							<li><img src="img/service_support/10.png" alt="1" width="" height="" /><p>Своевременное обновление всех прошивок и программного обеспечения для всех единиц оборудования в системе во время плановых выездов</p></li>
						</ol>
                    </div>
                    
    <div style="text-align: center;">
	    
	    <div class="sendRequest" style="width: 400px; margin:20px auto; margin-top:0px;" id="openRequest"> Оформить заявку на сервисное обслуживание</div>
	    <div class="request-box" style="display: none">
		    <div class="request-box-content" style="display: none">
			    <div class="close-modal"><img src="img/close.png"></div>
			    
			    <form action="/send/send_request.php" method="post" name="lixme" id="requestForm">
				   <h2 style="text-align: center; margin: 0px;">Контактные данные</h2> 
				    <div class="form-error" style="opacity: 0; color: #F00; text-align: center;">Заполните хотя бы одно из полей</div> 
				    <div>
<!-- 				    	<label>Имя</label> --><input id="contact_name" placeholder="Имя" type="text">
				    </div>
				    <div>
<!-- 				    	<label>Телефон</label> --><input type="text" id="contact_phone" placeholder="Телефон">
				    </div>
				    <div>
<!-- 				    	<label>Email</label> --><input type="text" id="contact_email" placeholder="Email">
				    </div>
				    <div style="padding:15px 0px; height: 45px;">
				    	<div id="sendRequest" class="sendRequest">Отправить</div>
				    </div>
			    </form>
			    <div class="success-result"></div>
		    </div>
		    
	    </div>
    </div>

    </div>
   

 


</td></tr>
</table>
</td>
</tr>
<script src="http://code.jquery.com/jquery-latest.min.js"
        type="text/javascript"></script>
<script src="js/jquery.maskedinput.js" type="text/javascript"></script>	

<script>
	function showError(){
	    $('.form-error').css({'opacity':'1'}); 
		$('#contact_phone').addClass('error-input');
		$('#contact_email').addClass('error-input');
	}
	
	function clearError(){
	    $('.form-error').css({'opacity':'0'}); 
		$('#contact_phone').removeClass('error-input');
		$('#contact_email').removeClass('error-input');
	}
	
	function showProgress (elem) {
		$(elem).hide();
		$(elem).after('<img src="img/loading2.gif" class="loader" style="width:45px; display:block; margin:0px auto;">');
	}
	
	function hideProgress (elem) {
		$(elem).show();
		$('.loader').hide();
	}


	
	$('#sendRequest').click(function(){
		var data = {
			'name': $('#contact_name').val(),
			'phone': $('#contact_phone').val(),
			'email': $('#contact_email').val()
		}
		var button=this;
		
		
		var form = $('#requestForm');
		var url = $(form).attr('action');
		if ($('#contact_phone').val() || $('#contact_email').val() ){
			clearError();
			showProgress(this);
	        $.ajax({
	            url: url, //Server script to process data
	            type: 'POST',
	            dataType: "json",
	            data:data,
	            success: function (json_result) {
		            if (json_result.status =='ok'){
		            	$(form).hide();
		            	$('.success-result').html('<div style="text-align:center">Ваша заявка принята. Наши специалисты свяжутся с вами в ближайшее время</div>')
						hideProgress(button);
		            }
		            else {
		            	showError();
		            	hideProgress(button);
					}

	            },
	            error: function (error) {
	                console.log('error');
	                console.log(error);
	                alert('error')
	            }
	        });
	    } else {
			showError();
	    }
	})
	
	$('.request-box').click(function(){
		$(this).fadeOut(function(){
			$('.success-result').html('');
			$('#requestForm').show();
			$('#requestForm input').val('');
		});

		$('.success-result').html('');
		clearError();
	})
	
	$('.close-modal').click(function(){
		$('.request-box').fadeOut(function(){
			$('.success-result').html('');
			$('#requestForm').show();
			$('#requestForm input').val('');
		});
		
		clearError();
	})
	
	$('.request-box-content').click(function(e){
		e.stopPropagation();
	})
	
	$("#openRequest").click(function(){
		
		$('.request-box').fadeIn(function(){
			$('.request-box-content').css({'margin-top':($(window).height() - $('.request-box-content').height()) /2 -50 +"px"})
			$('.request-box-content').show();
		});
	})
	
jQuery(function($){
   $("#contact_phone").mask("+7 (999) 999-99-99");
});		
</script>

<?php
include ("includes/footer_utf.inc");
?>