albert-m of DonInternet
3/28/2016 - 3:23 PM

Заглушка - сайт находится в разработке

Заглушка - сайт находится в разработке

* {
    margin: 0;
    padding: 0;
}

input:focus, textarea:focus {
    outline: 1px solid transparent;
}

body {
    font-family: 'Open Sans', sans-serif;
    color: white;
    background: url('bg.jpg') no-repeat center center fixed;
    background-size: cover;
    overflow-y: scroll;
}

a, a:hover {
    color: #fff;
    text-decoration: none;
}

.container {
    text-align: center;
    width: 800px;
    margin: 60px auto 0;
}

h1 {
    font-size: 40px;
    font-weight: 700;
    text-shadow: 0 1px 7px rgba(0, 0, 0, .2);
    letter-spacing: -2px;
    margin: 0 0 30px 0;
    color:#F9DC0D;
}

h2 {
    font-size: 40px;
    font-weight: 700;
    text-shadow: 0 1px 7px rgba(0, 0, 0, .2);
    text-transform: uppercase;
    letter-spacing: -2px;
    margin: 30px 0;
}

h3 {
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 5px;
    opacity: 0.3;
    margin-top: 40px;
}

h4 {
    font-size: 32px;
    font-weight: 400;
    color: #fff;
    line-height: 40px;
    display: inline-block;
    background: rgba(45, 45, 45, .3);
    margin-top: 50px;
    padding: 10px 20px;
    border-radius: 10px;
}

.desc {
    font-size: 18px;
    line-height: 36px;
    display: inline-block;
    background: rgba(45, 45, 45, .2);
    padding: 5px 10px;
    border-radius: 10px;
}

form {
    margin-top: 20px;
    position:relative;
}

form input {
    width: 310px;
    height: 46px;
    margin-bottom: 10px;
    padding: 0 10px;
    background: #fff;
    font-size: 16px;
    line-height: 46px;
    color: #777;
    border: 1px solid transparent;
    border-radius: 3px;
}

form textarea {
    width: 310px;
    height: 146px;
    margin-bottom: 10px;
    padding: 0 10px;
    background: #fff;
    font-size: 16px;
    line-height: 46px;
    color: #777;
    border: 1px solid transparent;
    border-radius: 3px;
}

input:focus, textarea:focus {
    border-color: #F9DC0D;
}

input.error, textarea.error {
    border-color: red;
    background-color: rgb(255, 228, 228);
}

form button {
    width: 130px;
    height: 46px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: #F9DC0D;
    border: 0;
    font-size: 16px;
    color: black;
    border-radius: 3px;
}

form button:hover {
    background: #e4c70d;
}

form button:active {
    background: #ffe20d;
}

form.proccess * {
    opacity:0.3;
}
form.proccess .loading {
    opacity:1;
    display:block;
    position:absolute;
    left: 368px;
    top:160px;
    z-index:2;
    width: 64px;
    height: 64px;
    background: url('loading.gif') no-repeat 0 0;
}

.success {
    display: none;
    margin-top:30px;
}
.success b {
    color:#F9DC0D;
}

.copyright {
    margin-top: 30px;
    text-align: center;
    margin-bottom: 20px;
}

.copyright a:first-child {
    border-bottom: 1px dotted #F9DC0D;
}

/*
Форма обратной связи.
ФИО
ТЕЛ.
Эл. Почта
Сообщение.
*/
<?php
$to = "stingmu@gmail.com";

$domain = $_SERVER["HTTP_HOST"];
$from = "info@".$_SERVER["HTTP_HOST"];

$name = htmlspecialchars($_POST["name"]);
$phone = htmlspecialchars($_POST["phone"]);
$mess = htmlspecialchars($_POST["mess"]);

if (!empty($name)) {
  $headers = "From: $from\r\n";
  $headers .= "Sender: $to\r\n";
  $headers .= "Content-type: text/html; charset=utf-8 \r\n";
  $subject = "Сообщение с сайта ".$domain;
  $message = "<html>
    <head>
      <title>Сообщение с сайта {$domain}</title>
    </head>
    <body>
      <h3>Пришло сообщение с сайта {$domain}</h3>
      <p>Имя: {$name}</p>
      <p>Телефон/E-mail: {$phone}</p>
      <p>{$mess}</p>
    </body>
  </html>";

  if (mail($to, $subject, $message, $headers, "-f".$from)) {
    exit('{"success": "ok"}');
  } else {
    exit('{"error": "Произошла ошибка при отправке сообщения"}');
  }
} else {
  exit('{"error": "Введите текст в соответствующем поле."}');
}

<!doctype html>
<html lang=ru>
<head>
  <meta charset="UTF-8">
  <title>Сайт TehnoTrade61.ru находится в разработке | ДонИнтернет - создание сайтов в Ростове-на-Дону</title>
  <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">

  <h1>
    TehnoTrade61.ru
  </h1>

  <h2>Сайт находится в разработке</h2>

  <div class="desc">
    г. Ростов-на-Дону, ст. Ольгинская, ул. В. Луговая д.80
  </div>
  <h3>
    Приносим извинения за доставленные неудобства.<br/>В скором времени сайт будет работать как надо!
  </h3>

  <h4>
    Свяжитесь с нами!
  </h4>

  <form action="#" class="form-inline">
    <div class="loading"></div>
    <input type="text" name="name" id="name" placeholder="Ваше имя..."><br/>
    <input type="text" name="phone" id="phone" placeholder="Телефон или Email..."><br/>
    <textarea name="mess" id="mess" placeholder="Сообщение..."></textarea><br/>
    <button type="submit">Отправить</button>
  </form>

  <div class="success">
    <b>Сообщение успешно отправлено!</b><br/>
    В ближайшее время мы свяжемся с вами. Спасибо!
  </div>

  <div class="copyright">

    2009-<?php print date('Y'); ?> © <a href="http://doninternet.ru">ДонИнтернет</a> -
    создание и продвижение сайтов в Ростове-на-Дону.<br/><br/>
    <a href="http://doninternet.ru" class="logo"><img src="logo.png" alt=""></a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
  $(function () {

    $("form #name, form #phone, form #mess").keyup(function(){
      if($(this).val().length) { $(this).removeClass('error'); }
    })

    $("form").submit(function (e) {
      e.preventDefault();

      var error = false;
      if ($("form #name").val().length < 1) {
        $("form #name").addClass('error');
        error = true;
      }
      if ($("form #phone").val().length < 1) {
        $("form #phone").addClass('error');
        error = true;
      }
      if ($("form #mess").val().length < 1) {
        $("form #mess").addClass('error');
        error = true;
      }

      if (error) {
        //alert('Заполните, пожалуйста, все поля в форме.');
      } else {

        $("form").addClass("proccess");

        $.ajax({
          type: "POST",
          url: "send.php",
          dataType: "json",
          data: {
            name: $("form #name").val(),
            phone: $("form #phone").val(),
            mess: $("form #mess").val(),
          },
          success: function (data) {
            console.log(data);
            if (data.success) {
              $("form").fadeOut('slow', function () {
                $(".success").fadeIn('slow');
              });
            } else {
              $(".error").html(data).show();
            }
          }
        });
      }
    });
  });
</script>
</body>
</html>