AMP — технология молниеностных страниц, которая позволяет загружать страницы Вашего сайта сверх-быстро. Если Вы хотите её использовать, то можно для начала попробовать сверстать одну страницу да так, чтобы она прям проходила проверку.
Что нам может понадобиться? Прежде всего — это примеры и документация по AMP там даже есть русский язык (справа выпадающий список)...
Также есть прекраснейший сайт codepen.io, в котором можно найти много интересных и полезный материалов.
Например:
- видео страница AMP;
- просто верстка страницы AMP;
- верстка AMP с выпадающим списком (бургер-меню);
- много примеров AMP-страниц.
Спецификация AMP такова, что требует определенных стандартов и полностью исключает пользовательский JS код, которым так злостно напичкивают свои и клиентские сайты web-программисты (фронтендеры и не только)... За исключением JS кода из проекта AMP.
Также стоит отметить, что CSS должен быть абсолютно минимален и не превышать 50 KB, что не допускает возможность использования толстых библиотек: Bootstrap, MaterialDesign... Поэтому, стоит задуматься над тем, чтобы пересмотреть свой взгляд на web-страницу.
По-идее, молниеносности AMP-страницам добавляет также то, что они кешируются на серверах проекта AMP и тем самым, доставляются пользователю еще быстрее, чем если бы они просто лежали на Вашем хостинге/сервере.
Логика создателей AMP.
Очень давно интернет начинался с того, что информации в нем было мало и также изображений на сайтах было минимальное количество. Поэтому, даже при низкой скорости (которая могла составлять от 32 KB/s И НИЖЕ!), сайты загружались и это было хорошо. Со временем, картинок стало больше, но это, как оказалось, далеко не основной острый угол в web-пространстве. А острым является то количество JavaScript (а также, что немаловажно, CSS), которое стали использовать абсолютно все, ни капли не задумываясь над тем, что порой нужно отдавать приоритет именно информации и скорости её получения, взаимодействия со страницей сайта, а не спец-эффектам, выпадающим мега-сложным меню, громадным слайдерам, которые (все эти элементы в итоге) только и делают. что сжирают ресурсы (батарею на тел/планшетах/и т.д., оперативу, процессор) устройства, которое использует пользователь на той стороне (конечный потребитель web-продукта).
И да пришел AMP... и не только лишь он. Благодаря Google и другим большим компаниям, людям, которые в них трудятся, были придуманы различные инструменты для проверки качества и анализа производительности web-страниц. Именно благодаря этому, были осознаны сообществом большие прописные и очевидные изтины:
- высоконагруженные (и/или просто важные сайты) должны быть сверх-быстрыми и открываться быстро, даже при плохом интернет-соединении;
- даже если Вы выгрузили свой web-продукт в мир и не рассчитываете на то, что кто-то будет заходить на него из зон, где интернет плохой или ужасный, то ВСЕ-РАВНО нужно позаботиться о таких случаях, так как каждый клиент (и/или пользователь) Вашего продукта ВАЖЕН и терять его из-за эффектов, жирного слайдера или толстухи-менюхи — нет никакого смысла;
- любой пользователь должен легко и быстро разобраться в структуре Вашей страницы и понять, что от него ожидает система логики, выстроенная Вами...
Поэтому, получается, что НЕ ТОЛЬКО AMP важно делать быстрыми, отзывчивыми и понятными, но и обычные страницы, если Вы рассчитываете получить заказы/положительный UX (опыт пользователей) Вашего web-продукта.
Следовательно:
- нужно отказаться от всего (ВООБЩЕ ВСЕГО!), от чего только можно отказаться, в плане:
- неоптимизированных изображений;
- jQUERY!!!!!! (используйте обычный JS);
- больших неоптимизированных (и даже оптимизированных) JS-библиотек;
- плохой разметки (HTML);
- большого количества запросов к статическим файлам (объединяй все, что только можешь [CSS в один файл, JS в один файл, фоновые и НЕ ТОЛЬКО ФОНОВЫЕ SVG в один файл]);
- постараться создавать свой продукт (именно НА САМОМ НАЧАЛЕ ЕГО СОЗДАНИЯ и далее...) так, чтобы Вы ориентировались на пользователя с ужасным инетом и человеком, который только недавно подсел на web-иглу (неопытный пользователь);
- верстать блоки с минимумом вложенностей...
Итак... чтобы запилить хотя бы что-то с AMP можно написать такой код:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<style amp-custom>
#body {
margin: 0 auto;
padding: 0;
}
</style>
</head>
<body id="body">
<div role="article" aria-label="email name" lang="en">
<h1>H1 heading</h1>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</div>
</body>
</html>
Как видно — трудностей нет. Просто следует писать так, как указанно в документации, благо, что она ЕСТЬ и даже на русском...
Этот код показывает пример использования CSS внутри AMP страницы:
<!doctype html>
<head>
...
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}
amp-img.grey-placeholder {
background-color: grey;
}
</style>
...
</head>
Этот показывает, как можно встроить картинку:
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
Пример большой AMP web-страницы с:
- формой заявки (FETCH);
- аккордеоном;
- слайдером;
- Google Analytics;
- serviceworker;
- всплывающим окном;
- яндыкс-метрикой:
DEMO
Результат проверки страницы-примера
<!doctype html>
<html lang="ru" ⚡>
<head>
<meta charset="utf-8">
<title>Заказать сайт/продвижение</title>
<meta name="description" content="Заказать сайт. Звоните 24/7">
<meta name="keywords" content="заказать сайт, создание сайтов, студия веб дизайна, продвижение сайта, реклама">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
<link rel="canonical" href="https://order.inverser.pro">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
html{touch-action:manipulation}
@font-face{font-family:'Play';font-display:auto;font-style:normal;font-weight:400;src:local('Play'),local('Play'),url(/sys/im/Play.woff2) format('woff2')}
body,html,button{font:18px/1 Play,sans-serif}
.logo{margin:10px auto}
.logo svg{max-width:100%}
.l_{max-width:100%;width:100%}
.l_ svg{fill:#0e3984}
.l_{top:0;transform:translateX(-50%);left:50%;-webkit-clip-path:polygon(20% 0,80% 0,72.5% 100%,27.5% 100%);clip-path:polygon(20% 0,80% 0,72.5% 100%,27.5% 100%)}
.center{margin:0 auto}
h1,h2,h3,h4,h5{margin:0}
h2{font:22px/32px Play,monospace}
.tac{text-align:center}
.taj,p{text-align:justify}
p{text-indent:15px}
.ttu{text-transform:uppercase}
.h50v{height:50vh;max-height:420px;min-height:340px}
.mh10{margin:10px 0}
.center{max-width:660px}
.p8,button,input{padding:8px}
.b3,button,.lightbox .center{-webkit-border-radius:3px;border-radius:3px}
input,textarea{border:0;box-shadow:0 0 0 1px}
textarea{min-width:100%;max-width:100%;width:100%;height:230px;max-height:60vh}
.in{display:inline-block}
.fr{float:right}
label{line-height:2}
.fx{display:flex}
.fsb{justify-content:space-between}
.pwb{flex-flow:column}
.fxjc{justify-content:center}
.fxje{justify-content:flex-end}
.fac{align-items:center}
.fxac{align-items:center}
.fw{flex-wrap:wrap}
button{color:#fff}
.mb10{margin-bottom:10px}
.bxsh{box-shadow:0 3px 10px -4px #000}
a{color:#000;text-decoration:none;border-bottom:1px dashed #666}
.p{position:absolute}
.pr{position:relative}
.pa{position:absolute;top:0;right:0;bottom:0;left:0}
.pf{position:fixed}
.z{z-index:1}
.ova{overflow:auto}
.lb{background:rgba(255,255,255,.85)}
.lb .center{background:#fff;padding:10px}
.ofcv img,.ofcv{object-fit:cover}
.sml{font-size:12px;color:#666;margin-top:6px}
.siteInf{top:50%;left:50%;transform:translate(-50%,-50%);background:#fff}
.fs_{border-left:2px solid #1d9a3b}
.fe_{border-left:2px solid #ff002a}
.bxs{box-sizing:border-box}
.w1{width:100%}
.p20{padding:20px 0}
.btnGr{top:auto}
h4.in{vertical-align:sub}
.btnGr button{margin:0 2px;border-radius:3px 3px 0 0}
.mr10{margin-right:10px}
button{background:#00386f;border:0;box-shadow:inset 0 0 0 1px #0E3984;font-size:16px}
footer{margin:0 auto 40px auto}
.m0{margin:0}
.pwb .ttu{letter-spacing:5.7px;margin-left:6px}
@media(max-width:460px){
.lg .ttu{font-size:16px}
}
</style>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<amp-install-serviceworker
src="/service-worker_AMP.js"
layout="nodisplay">
</amp-install-serviceworker>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "UA-67267447-2",
"config" : {
"UA-67267447-2": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
<div class="tac ttu lg">
<div class="pr w1 center">
<div class="logo">
<svg viewBox="0 0 104.83 27.69" width="484"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#inverser"></use></svg>
<div class="logo">
<div class="p l_">
<svg viewBox="0 0 104.83 27.69" width="484"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#inverser"></use></svg>
</div>
</div>
</div>
</div>
<div class="ttu">Powerful web-based technologies</div>
</div>
<main>
<section class="center bxsh mb10">
<h2 class="tac">Создание сайтов</h2>
<amp-carousel class="h50v" width="400" height="300" layout="responsive" type="slides">
<amp-img src="/sys/sliderInSlider/17-lawyer.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">«Александр Шипицын»</a>
<div class="sml">Адвокатское бюро</div>
</div>
</amp-img>
<amp-img src="/sys/sliderInSlider/02_dv.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">Дверной</a>
<div class="sml">интернет-магазин</div>
</div>
</amp-img>
<amp-img src="/sys/sliderInSlider/05_snth.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">Santech</a>
<div class="sml">интернет-магазин</div>
</div>
</amp-img>
<amp-img src="/sys/sliderInSlider/06_ton.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">Тонировка</a>
<div class="sml">сайт компании</div>
</div>
</amp-img>
<amp-img src="/sys/sliderInSlider/08_lyu.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">Дом люстры</a>
<div class="sml">интернет-магазин</div>
</div>
</amp-img>
<amp-img src="/sys/sliderInSlider/09_kar.jpg" width="400" height="300" alt="Создание сайтов. Заказать сайт">
<div class="p b3 z p8 tac bxsh siteInf">
<a href="https://link.inverser.pro/r?l=" rel="nofollow" target="_blank">Каркас</a>
<div class="sml">сайт строительной компании</div>
</div>
</amp-img>
</amp-carousel>
<amp-accordion class="center">
<section>
<header class="fx fsb fac p8"><h4 class="in">Создание сайтов</h4><button class="fr in">🔥 Подробнее</button></header>
<div>
<p>Цена сайта от 39$ (999 грн., 2499 руб.).</p>
<h2>Полноценное и легкое погружение Вашего бизнеса в web-сферу.</h2>
<p>Мы умеем создавать уникальные сайты, написанные на различных скриптовых языках (PHP, JS). Мы готовы реализовать проекты любого уровня: от обычного landing-page (одностраничника), до большого портала с кучей логики и подключением различных сервисов.</p>
<h2>Новейшие технологии.</h2>
<p>Мы используем передовые технологии в web-сфере. Именно они позволяют нашим клиентам добиваться максимальной прибыли. Это связано с приятными пользовательскими интерфейсами, а также передовыми JS-библиотеками (VueJS), современными возможностями NodeJS-серверов. Кроме того, мы ускоряем уже имеющиеся проекты, которые могут быть реализованы на PHP, MySQL, JS и т.д.</p>
<h2>Простые цены.</h2>
<p>Мы не гонимся за ценником и к каждому клиенту <strong>подходим индивидуально</strong>. Если Вам требуется простой сайт и Вы имеете ограниченный бюджет, то мы сможем реализовать его для Вас на основе имеющихся популярных CMS (Joomla, WordPress, OpenCart и др.). Однако, если Ваш проект требует нетривиальных возможностей, мы также сможем их реализовать.</p>
<p><strong>Мы предлагаем полное сопровождение Вашего бизнеса в сети (online) и за её пределами (offline):</strong></p>
<ul>
<li>Создание сайта (сервисов или микросервисов для уже имеющихся проектов).</li>
<li>Брендирование (айдентика) – создание индивидуального стиля компании: логотипы, фирменные слоганы, дизайн (от печатной продукции до помещений).</li>
<li>Создание и ведение социальных сетей (групп компании).</li>
<li>Полный аудит сайта.</li>
<li>SEO с абсолютным погружением в исходный код, настройки Вашего сервера, оптимизации запросов к базе данных, оптимизации запросов к серверу и т.п.</li>
<li>Создание микроразметки для тематических ресурсов.</li>
<li>Создание/подключение AMP-страниц.</li>
<li>Создание макетов для печатной продукции любого уровня.</li>
<li>Создание индивидуальных видео-роликов с motion-дизайном.</li>
<li>Подключение любых сервисов (платежи онлайн, чаты и т.п.), которые имеют API и хотя бы элементарную документацию.</li>
<li>Адаптация Ваших проектов под современные web-стандарты.</li>
<li>Обучение Вас и/или Ваших сотрудников взаимодействию с созданным продуктом.</li>
<li>Пояснение всех нюансов сотрудничества. Наша цель – открытое и долгосрочное сотрудничество на взаимовыгодных условиях.</li>
</ul>
</div>
</section>
</amp-accordion>
</section>
<section class="center bxsh mb10">
<h2 class="tac">Брендирование</h2>
<amp-carousel class="h50v" width="400" height="300" layout="responsive" type="slides">
<amp-img src="/sys/printProd/p.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p2.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p3.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p4.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p5.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p6.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p7.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p9.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p10.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p11.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
<amp-img src="/sys/printProd/p12.jpg" width="400" height="300" alt="Брендирование, полиграфия, айдентика"></amp-img>
</amp-carousel>
<amp-accordion class="center">
<section>
<header class="fx fsb fac p8"><h4 class="in">Брендирование</h4><button class="fr in">🔥 Подробнее</button></header>
<div>
<h2>Мы умеем все!</h2>
<p>От создание макетов визиток, до создания уникальных логотипов, <strong>Вашего бренда</strong> (айдентика)!</p>
<p>Т.е. с нашей помощью Вы сможете создать графическое представление Вашего бизнеса:</p>
<ul>
<li>логотип;</li>
<li>соцсети;</li>
<li>визитки;</li>
<li>рекламная продукция;</li>
<li>оформление любых предметов Вашим фирменным стилем (пакеты, папки, ручки и т.п.).</li>
</ul>
<h2>Сайты и полиграфия связаны. Как?</h2>
<p>Современные тенденции развития web-технологий не стоят на месте. Требования все растут. На данный момент трудно представить себе компанию, которая бы имела разные логотипы, стилистику на сайте и на печатной продукции.</p>
<p>Логично представить, что вся печатная продукция должна в точности соответствовать тем визуальным стилям, которые используются в web-пространстве, представляющего конкретную компанию.</p>
<p>Поэтому мы готовы предложить Вам полное соответствие тому, что люди видят в интернете, на Вашем сайте и тому, что они могут пощупать руками (визитки, документы, папки, ручки, футболки и т.п.).</p>
<h2>С нами удобно.</h2>
<p>Так как мы предлагаем Вам и создание сайтов, и бреднирование, то с нами (это логично) удобно строить деловые отношения. Т.к. время – это самый ценный ресурс, который у нас есть, его необходимо беречь, а не расходовать на поиски тех или иных людей с определенными возможностями.</p>
</div>
</section>
</amp-accordion>
</section>
<section class="center bxsh mb10">
<h2 class="tac">Реклама</h2>
<amp-img src="/sys/b/ani/img_ani_2.jpg"
width="1200"
height="737"
layout="responsive"
alt="Реклама"
class="h50v ofcv">
</amp-img>
<amp-accordion class="center">
<section>
<header class="fx fsb fac p8"><h4 class="in">Реклама</h4><button class="fr in">🔥 Подробнее</button></header>
<div>
<p>Раскрутка сайта от 94$ (2499 грн, 7499 руб.).</p>
<h2>Полноценные рекламные кампании (Яндекс, Google).</h2>
<p>Благодаря нашему многолетнему опыту, мы создаем полноценные <strong>рекламные кампании</strong>, которые приводят <u>клиентов</u>, а <u>не просто посетителей</u> на Ваш ресурс в сети.</p>
<p>Предлагаем Вам самим регулировать рекламный бюджет, в зависимости от прибыли, которую Вы получаете от клиентов с рекламы.</p>
<p class=sml>Стоит учитывать, что минимальный рекламный бюджет для определенной рекламной сети должен быть не ниже указанного нами – для создания максимально благоприятной отдачи от рекламы.</p>
<p>Давайте начнем уже сейчас получать прибыль вместе, с помощью самого крупного в мире поискового гиганта Google и его сервиса объявлений <strong>Google Ads</strong>. Вместе с Google Ads, рекламу Ваших товаров или услуг увидят не только при <strong>поиске</strong> конкретных результатов запросов, но и на тематических площадках (партнеры <strong>Google</strong>), а также на <strong>YouTube</strong>.</p>
<p>Кроме того, мы сможем создать для Вас рекламную кампанию в Яндекс.Директ, что также может привлечь большое количество гоячих потенциальных клиентов в Ваш бизнес. И, конечно же, мы не обходим стороной социальные сети: VK, Facebook, Instagram.</p>
<p>Мы предоставляем прозрачные отчеты о расходах. Вы сможете сами контролировать бюджет рекламной кампании.</p>
<p>Общая суммарная аудитория <strong>Google</strong> на сегодняшний день охватывает почти каждого жителя планеты, который использует интернет (исключая лишь некоторые страны). Поэтому Ваш товар или услугу обязательно купят (закажут) с нашей помощью.</p>
<h2>Социальные сети.</h2>
<p>Кроме того, чтобы охват аудитории возрос еще больше, мы предлагаем войти в <strong>социальные сети</strong> и находить там потенциальных горячих покупателей. Мы поможем Вам создать группы в самых популярных соцсетях мира и продвигать их, тем самым находя новых клиентов для Вашего бизнеса.</p>
<h2>SEO с погружением вглубь.</h2>
<p>Предлагаем различные подходы к оптимизации Ваших web-проектов. Кроме того, SEO продвижение с поведенческим фактором, а также закупкой интересных ссылок, позволяющих поднять сайт в ТОП выдачи без санкций от поисковых систем.</p>
<p>Кратко: SEO имеет ряд оптимизаций как внутри Вашего сайта, сервера, так и снаружи: соцсети, внешние ссылки и поведенческий фактор. Именно это мы и будем «двигать» для достижения максимальных позиций в выдаче по интересущим Вас запросам. Это позволит получить клиентов условно-бесплатно или гораздо дешевле, чем если бы они приходили из рекламы (контекстной или медийной). Однако, в данном методе есть много нюансов, которые обсуждаются индивидуально для Вашего проекта.</p>
<h2>Реклама offline.</h2>
<p>А еще мы умеем создавать красивые и удобочитаемые <strong>рекламные материалы</strong> для <strong>печати на бумаге</strong>, <strong>ручках</strong>, <strong>футболках</strong> и т.п. А также создавать макеты для больших <strong>рекламных щитов</strong> (billboard). Создать <strong>визитки</strong> с нашей помощью не составит труда.</p>
</div>
</section>
</amp-accordion>
</section>
<div>
<amp-lightbox id="lb" layout="nodisplay">
<div class="pa pf z1 ova lb">
<section class="bxsh center b3">
<div class="fx fxje"><button on="tap:lb.close" role="button" class="tac mh10">Закрыть ×</button></div>
<h2 class="tac">Задайте нам свой вопрос:</h2>
<form class="sample-form"
method="post"
action-xhr="/setAMPFBData.php"
target="_top">
<div class="mb10">
<label>Введите Ваш номер телефона</label>
<br>
<input type="tel" minlength="10"
name="phone"
placeholder="Телефон"
class="w1 bxs b3"
required>
<div class="sml">Например: +79852142565</div>
</div>
<div class="mb10">
<label>Введите Ваш email</label>
<br>
<input type="email" minlength="8"
name="email"
class="w1 bxs b3"
placeholder="Email"
required>
<div class="sml">Например: irina@gmail.com</div>
</div>
<div class="mb10">
<label>Введите текст обращения</label>
<br>
<textarea name="text" minlength="5"
class="p8 b3 bxs"
placeholder="Ваше обращение"
required></textarea>
</div>
<div submit-success>
<template type="amp-mustache">
{{#errmsg}}
<div class="bxsh mh10 p8 b3 fe_">{{errmsg}}</div>
{{/errmsg}}
{{#successmsg}}
<div class="bxsh mh10 p8 b3 fs_">{{successmsg}}</div>
{{/successmsg}}
</template>
</div>
<div submit-error>
<template type="amp-mustache">
{{#errmsg}}
<div class="bxsh mh10 p8 b3 fe_">{{errmsg}}</div>
{{/errmsg}}
<div class="bxsh mh10 p8 b3 fe_">Возникла ошибка... Попробуйте позже.</div>
</template>
</div>
<button type="submit" class="w1 ttu p20 bxs">Отправить</button>
<input type="hidden" name="location_" value="https://order.inverser.pro">
<input type="hidden" name="set" value="setAMPFBData">
</form>
</section>
</div>
</amp-lightbox>
</div>
<amp-lightbox id="cnt" layout="nodisplay">
<div class="pa pf z1 ova lb">
<section class="bxsh center b3">
<div class="fx fxje"><button on="tap:cnt.close" role="button" class="tac mh10">Закрыть ×</button></div>
<h2 class="tac">Свяжитесь с нами:</h2>
<div class="tac">
<div class="mh10 tac">
<div>Телефон: <a href="tel:+38(066)0000000">+38 (066) 0000000 | Vodafone UA</a></div>
<div class="fx fxjc fxac fw mh10">
<div class="fx fxjc fxac mr10">
<div class="in mr10"><a href="whatsapp://call?number=380660000000" rel="nofollow">WhatsApp</a></div>
<svg viewBox="0 0 512 512" width="44">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#whatsapp"></use>
</svg>
</div>
<div class="fx fxjc fxac">
<div class="in mr10"><a href="viber://add?number=380660000000" rel="nofollow">Viber</a></div>
<svg viewBox="0 0 504 504" width="44">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#viber"></use>
</svg>
</div>
</div>
</div>
<div class="fx fxjc fxac fw mh10">
<div class="mr10">
<div>
<a href="//vk.com/inverser" rel="nofollow">
<svg viewBox="0 0 94 94" width="74">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#vk"></use>
</svg>
</a>
</div>
</div>
<div>
<a href="//facebook.com/inverser" rel="nofollow">
<svg viewBox="0 0 60 60" width="74">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#fb"></use>
</svg>
</a>
</div>
</div>
<div class="mh10">Email: <a href="mailto:go@inverser.pro">go@inverser.pro</a></div>
<div class="fx fxjc fxac mh10">
<div class="in"><a href="//t.me/inverserpro" rel="nofollow">Telegram</a></div>
<svg viewBox="0 0 500 416" width="74">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/sys/b/ic.svg#telegram"></use>
</svg>
</div>
</div>
</section>
</div>
</amp-lightbox>
<div class="w1 pa pf fx center btnGr">
<button class="w1 bxs" on="tap:lb">
🔔 Задать вопрос
</button>
<button class="w1 bxs" on="tap:cnt">
📱 Контакты
</button>
</div>
</main>
<footer>
<div class="mh10 tac">
<div class="fx pwb mh10"><div class="in ttu"><a href="//order.inverser.pro" rel="nofollow">Inverser.PRO</a></div><div class="in sml m0">powerful web-based technologies</div></div>
<div class="sml">Copyleft 2021. Powered by AMP ⚡.</div>
<div class="sml">God, thank you, for you created Google.</div>
</div>
</footer>
<amp-analytics type="metrika">
<script type="application/json">
{
"vars": {
"counterId": "53428627"
}
}
</script>
</amp-analytics>
<amp-analytics type="metrika">
<script type="application/json">
{
"vars": {
"counterId":"53428627",
"clickmap":"true",
"trackLinks":"true",
"accurateTrackBounce":"true",
"webvisor":"true",
"trackHash":"true"
}
}
</script>
</amp-analytics>
</body>
</html>
Google проверка web-страниц иногда может показывать, что ваша страница не является AMP, установите расширение для браузера, которое бы проверяло страницу на AMP-шность:
Еще пример AMP:
DEMO
<!doctype html>
<html lang="ru-RU" dir="ltr" ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1">
<link rel="canonical" href="https://lawyer.loc"><meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"><title>✅Адвокатское бюро город Киев, Украина</title><meta name="description" content="? Адвокат Украина звоните прямо сейчас +38 (123) 123-12-12"><meta name="keywords" content="Адвокат Украина, адвокат Киев, киевский адвокат, адвокаты в Киеве, Украина адвокат, хороший адвокат">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body{font-family:Arial,sans-serif;font-size:.75rem;line-height:1.8;background:#f3f3f5;color:#333;padding-bottom:100px}
a{border-bottom:1px dotted #333;text-decoration:none}
.wbamp-container{margin:0 auto;padding:0;border:none;box-sizing:border-box;max-width:479px}.wbamp-container.wbamp-ad,.wbamp-container.wbamp-footer,.wbamp-container.wbamp-header{text-align:center}.wbamp-container.wbamp-header-module{margin:0 auto;padding:0}.wbamp-container.wbamp-header-module:after{content:"";display:table;clear:both}.wbamp-container.wbamp-header-module amp-img{display:inline-block;margin-left:.25em;margin-right:.25em}.wbamp-container.wbamp-header{margin:0 auto;padding:0;font-size:1.2em;background:#57a0ff;color:#fff;padding:10px 0;vertical-align:middle;text-align:center}.wbamp-container.wbamp-header:after{content:"";display:table;clear:both}.wbamp-container.wbamp-header.wbamp-header-image{line-height:1em}.wbamp-container.wbamp-header.wbamp-header-no-background{background-image:none}.wbamp-header a,.wbamp-header a:visited{text-decoration:none;color:#fff;min-height:1.8em}.wbamp-header-text{font-size:1.2rem}.wbamp-header-image.wbamp-header-site-name amp-img{vertical-align:middle}.wbamp-header-image.wbamp-header-site-name .wbamp-header-text{display:inline-block;vertical-align:middle;margin-left:.25em;line-height:1.8}@media only screen and (max-width:767px){.wbamp-header-image.wbamp-header-site-name .wbamp-header-text{margin-left:0}}.wbamp-container.wbamp-module{background:#fff;padding:1em}.wbamp-container.wbamp-content{margin:0 auto;font-size:1rem;background:#fff;color:#333}.wbamp-content{overflow-wrap:break-word;word-wrap:break-word}.wbamp-container.wbamp-content a{color:#333}.wbamp-container.wbamp-content a:hover{color:#777}.wbamp-container.wbamp-content h1{padding:.5em;font-size:1.4rem;background:#57a0ff;color:#333}.wbamp-container.wbamp-content h2{padding:.5em;font-size:1.35em;background:#57a0ff;color:#333}.wbamp-container.wbamp-content h3{padding:.5em;font-size:1em;background:#57a0ff;color:#333}.wbamp-container.wbamp-footer{min-height:0;margin:0 auto 0;padding:0;background:#57a0ff;color:#fff;font-size:.8em;vertical-align:middle}.wbamp-container.wbamp-footer .custom{display:inline-block;line-height:0}.amp-wp-enforced-sizes{max-width:100%}.wbamp-amp-tag{margin:0;padding:.25em 1em;text-align:center}amp-img{display:block;margin-left:auto;margin-right:auto}.wbamp-amp-tag.wbamp-carousel{margin:0;padding:0}.wbamp-amp-tag.wbamp-carousel amp-img{margin-left:0;margin-right:0}[class*="wbn-slider"] button,.amp-dn{display:none}
p,.wbn-text{padding:0 .75rem;text-align:justify}
.usl{display:flex}
.usln{margin-right:.75rem}
</style>
<script type="application/ld+json">{
"@context": "http://schema.org",
"@type": "WebPage",
"description": "? Адвокат Украина звоните прямо сейчас",
"mainEntityOfPage": "https://lawyer.loc",
"headline": "✅Адвокатское бюро город Киев, Украина",
"publisher": {
"@type": "Organization",
"name": "",
"logo": {
"@type": "ImageObject",
"url": "https://lawyer.loc",
"width": 0,
"height": 0
}
}
}</script><script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "UA-175152395-1",
"config" : {
"UA-175152395-1": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
<amp-analytics type="metrika">
<script type="application/json">
{
"vars": {
"counterId": "66357925"
}
}
</script>
</amp-analytics>
<div class="wbamp-wrapper"><nav class="wbamp-container wbamp-header">
<a class="wbamp-header-text" href="https://lawyer.loc/">Адвокатское бюро «Александра Шипицына». Украина, город Киев.</a><br><a href="tel:+38(123)123-12-12">? Позвоните нам</a><br>Тел.: +38(123)123-12-12</nav>
<div class="wbamp-container wbamp-content">
<div class="blog" itemscope=""><div class="category-desc clearfix"><section class="pr tc mainPage"><div class="pr crown"><div></div><div></div><div></div><div></div><div></div><div></div></div><h1 class="an o0 tY-100p">Адвокатское бюро «Александра Шипицына».</h1><div class="an o0 tY-100p m0 tj mainTxt">Специалисты Адвокатского бюро «Александра Шипицына» имеют более чем пятнадцатилетний опыт, связанный как с досудебным так и судебным разрешением спорных вопросов. Так же предоставляем услуги медиации.</div><div class="pr fx an o0 tX-100p mh5 tj mainBlock"><div class="pr mainImgD"><div class="p0 o0 an img mainImg" data-bg="/images/mainPage/1"></div><div class="pa line-1"></div><div class="pa line-2"></div></div><div><div class="tu h2"><h2>Наш опыт</h2></div><p>Мы имеем большой опыт в предоставлении услуг по разрешению гражданско-правовых споров (взыскание задолженности, взыскание алиментов, расторжение брака, раздел совместно нажитого имущества в период брака, признание права собственности на имущество и другая защита имущественных прав и интересов Клиента, земельные споры).</p></div></div><div class="pr fx an o0 tX-100p mh5 tj rightBlock mainBlock mainBlock2"><div class="pr mainImgD"><div class="p0 o0 an img mainImg" data-bg="/images/mainPage/2"></div><div class="pa line-1"></div><div class="pa line-2"></div></div><div><div class="tu h2"><h2>Богатая практика</h2></div><p>Уникальный опыт в рассмотрении хозяйственно-правовых споров в специализированных (хозяйственных) судах Украины. В том числе имеется богатая практика по взысканию убытков с Государственного бюджета Украины в связи с противоправными действиями (бездействием) или принятием противоправных решений органами Государственной налоговой (фискальной) службы. Есть позитивная практика обращений в Европейский суд по правам человека по хозяйственным спорам. Сопровождение процедуры банкротства в том числе и путем инициирования данной процедуры.</p></div></div><div class="pr fx an o0 tX-100p mh5 tj mainBlock mainBlock3"><div class="pr mainImgD"><div class="p0 o0 an img mainImg" data-bg="/images/mainPage/3"></div><div class="pa line-1"></div><div class="pa line-2"></div></div><div><div class="tu h2"><h2 class="m0i">Разрешение спорных взаимоотношений с органами государственной власти и местного самоуправления</h2></div><p>Широкая положительная практика предоставления услуг Клиентам по обжалованию противоправных действий (бездействий) или решений органов государственной власти (споры с налоговыми и таможенными органами, споры с Государственной архитектурно-строительной инспекцией и другое) в судах административной юрисдикции.</p></div></div><div class="br an o0 trY-90d wbn-slider"><div class="wbn-slide active"><div class="p0 an o0 img wbn-bg" data-bg="/images/mainPage/4"></div><div class="wbn-overlay-text"><h3>Уголовные дела</h3><div class="br wbn-text">Мы имеем богатую практику по предоставлению правовой помощи во время уголовного производства, как на стадии досудебного следствия (сопровождение обысков, услуги адвоката во время допросов в качестве свидетеля, подозреваемого, обвиняемого;обжалование следственному судье действий (бездействий) или решений органов досудебного следствия и процессуального руководителя;подготовка ходатайств, запросов и другое) так и на стадии судебного производства. Перед началом предоставления услуг в уголовном производстве адвокатом разрабатывается тактика и стратегия защиты, которая оговаривается и согласовывается с Клиентом, а затем реализуется во время предоставления правовой помощи. </div></div></div><div class="wbn-slide"><div class="p0 an o0 img wbn-bg" data-bg="/images/mainPage/5"></div><div class="wbn-overlay-text"><h3>Все уровни судебной системы</h3><div class="br wbn-text">Практика специалистов Адвокатского бюро «Александра Шипицына» включает в себя представление интересов Клиента на всех уровнях судебной системы Украины, включая Верховный Суд (ранее Верховный Суд Украины). После исчерпания всех национальных способов защиты интересов Клиента Адвокатского бюро «Александра Шипицына» предоставляет услуги по представлению интересов Клиента в Европейском суде по правам человека. </div></div></div><div class="wbn-buttons"><div class="ns pr fx ac jc wbn-slider-back-btn"><button><span class="c0 icon-arrow-first">left</span></button></div><div class="ns pr fx ac jc wbn-slider-next-btn"><button><span class="c0 icon-arrow-last">right</span></button></div></div></div></section></div></div>
</div>
<div class="wbamp-container wbamp-content">
<div class="moduletable">
<h3>Меню</h3>
<ul class="nav menu dn ova mod-list">
<li class="item-106 default current active">
<a href="/ru/">Главная</a>
</li>
<li class="item-102">
<a href="/ru/o-nas" >О нас</a>
</li>
<li class="item-103">
<a href="/ru/kontakty" >Контакты</a>
</li>
<li class="item-104">
<a href="/ru/uslugi" >Услуги</a>
</li>
<li class="item-110">
<a href="/ru/novosti" >Новости</a>
</li>
</ul>
</div>
</div>
<div class="wbamp-container wbamp-content">
<div class="moduletable dn ">
<h3>Язык/мова</h3>
<div class="mod-languages dn ">
<ul class="lang-inline" dir="ltr">
<li><a href="/ua/">Українська</a></li>
<li class="lang-active"><a target="_blank" href="https://link.inverser.pro/r2?l=https://lawyer.loc/ru/amp">Русский</a></li>
</ul>
</div>
</div>
</div>
<div class="wbamp-container wbamp-content">
<div class="moduletable">
<div class="custom">
<div class="pr z3 c_1 mh5">
<div class="amp-dn mh1-2">
<h3 class="in mr1-2"><span class=icon-phone-2></span> Телефон:</h3>
<div class="copy in"><span class="a_ cp loadPhone"></span><i class="cp ml1-2 icon-save-copy"></i></div>
</div>
<div class="mh1-2">
<h3 class="in mr1-2"><span class=icon-location></span> Адрес:</h3>
<div class="copy in"><span class="cp a_" >12345, Украина, г. Киев</span><i class="cp ml1-2 icon-save-copy"></i></div>
</div>
<h3 class="mh1"><span class="icon-calendar"></span> График работы:</h3>
<div>С 10:00 до 18:00 <br>Суббота и воскресенье — по договоренности. </div>
<h3 class="mh1">Facebook: <a target="_blank" href="https://link.inverser.pro/r2?l=https://fb.me/" rel=nofollow>@lawyer</a></h3>
<h3 class="mh1">Instagram: <a target="_blank" href="https://link.inverser.pro/r2?l=https://www.instagram.com/" rel=nofollow>@lawyer</a></h3>
<h3 class="mh1">Telegram: <a target="_blank" href="https://link.inverser.pro/r2?l=https://t.me/" rel=nofollow>@lawyer</a></h3>
</div>
</div>
</div>
</div>
</div>
</body></html>
Странность FETCH JS и AMP.
На момент верстки одной из страниц примеров я столкнулся с такой задачей: нужно было просто отправлять данные формы через Fetch, но сделать это не получалось, сколько бы я не бился, пока не нагуглил то, что со страниц AMP Fetch выполняется только если файл-обработчик fetch-запроса находится в корне каталога сайта. Т.е. если у вас адрес сайта site.redirct-one.com, то именно в корне него должен лежать файл, к примеру, fetch.php, который бы обрабатывал запрос из формы на странице AMP.
HTML-форма заявки на сайте на AMP-странице:
<form class="sample-form" method="post" action-xhr="https://order.inverser.pro/" target="_top">
<div class="mb10">
<label>Введите Ваш номер телефона</label><br><input type="tel" minlength="10" name="phone" placeholder="Телефон" class="w1 bxs b3" required>
<div class="sml">Например: +79852142565</div>
</div>
<div class="mb10">
<label>Введите Ваш email</label><br><input type="email" minlength="8" name="email" class="w1 bxs b3" placeholder="Email" required>
<div class="sml">Например: irina@gmail.com</div>
</div>
<div class="mb10"><label>Введите текст обращения</label><br><textarea name="text" minlength="5" class="p8 b3 bxs" placeholder="Ваше обращение" required></textarea></div>
<div submit-success>
<template type="amp-mustache">
{{#errmsg}}
<div class="bxsh mh10 p8 b3 fe_">{{errmsg}}</div>
{{/errmsg}} {{#successmsg}}
<div class="bxsh mh10 p8 b3 fs_">{{successmsg}}</div>
{{/successmsg}}
</template>
</div>
<div submit-error>
<template type="amp-mustache">
{{#errmsg}}
<div class="bxsh mh10 p8 b3 fe_">{{errmsg}}</div>
{{/errmsg}}
<div class="bxsh mh10 p8 b3 fe_">Возникла ошибка... Попробуйте позже.</div>
</template>
</div>
<button type="submit" class="w1 ttu p20 bxs">Отправить</button>
<input type="hidden" name="location_" value="https://order.inverser.pro">
<input type="hidden" name="set" value="setAMPFBData">
</form>
Стоит обратить внимание, что посылается именно FETCH, а не XHR! и на этот код:
<form class="sample-form"
method="post"
action-xhr="/setAMPFBData.php"
target="_top">
вот этот код передает скрытые данные для fetch запроса
<input type="hidden" name="location_" value="https://order.inverser.pro">
<input type="hidden" name="set" value="setAMPFBData">
Вот так это выглядит при запросе:
Такой вот обработчик событий при отправке формы:
PHP код обработки POST-запроса из fetch js AMP страницы. Напомню, что файл ДОЛЖЕН ЛЕЖАТЬ В КОРНЕ САЙТА!
<?php
function url()//Функция проверки URL сайта (чтобы как бы не отправили с другого адреса)
{
if (isset($_SERVER['HTTPS'])) {
$protocol = ($_SERVER['HTTPS'] && $_SERVER['HTTPS'] != "off") ? "https" : "http";
} else {
$protocol = 'http';
}
return $protocol . "://" . $_SERVER['HTTP_HOST'];
}
if ($_GET['__amp_source_origin'] != url()) {//если кто-то пытается запросить через GET страницу с как бы отправкой формы
header('HTTP/2.0 404 Not found');
header('Location:/#err');
exit;
}
function challsrt($data)//очистка данных
{
$array1 = array('/*', '*/', '\'', '"', '//', 'wss:', 'blob:', 'localhost', '^', '*', 'http:', 'https:', '<script', 'base64', 'where', '/*', 'mysql', 'union', 'select', 'drop', '\0x');
$data = strip_tags($data);
$data = htmlspecialchars($data, ENT_QUOTES);
$data = trim($data);
return str_ireplace($array1, '*', $data);
}
if (!empty($_POST) && $_SERVER['HTTP_ORIGIN'] == 'https://YOU_URL.COM' && $_POST['location_'] == url()) {
session_start();
$domain_url = (isset($_SERVER['HTTPS']) ? "https" : "http") . "://$_SERVER[HTTP_HOST]";
header("Content-type: application/json");
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: *.ampproject.org");
header("AMP-Access-Control-Allow-Source-Origin: " . $domain_url);
$phone = challsrt($_POST['phone']);
$email = challsrt($_POST['email']);
$text = challsrt($_POST['text']);
$loc_ = challsrt($_POST['location_']);
if (filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
echo json_encode(array('errmsg' => 'Проверьте email!'), JSON_UNESCAPED_UNICODE);
exit;
}
$emailLen = iconv_strlen($email, 'UTF-8');
$phoneLen = iconv_strlen($phone, 'UTF-8');
$txtLen = iconv_strlen($text, 'UTF-8');
$ip_client_sub = $_SERVER['HTTP_X_FORWARDED_FOR'];
$agent = getenv("HTTP_USER_AGENT");
$date = date("Y-m-d H:i:s");
//сообщение как бы админу сайта
$message = '<p><a href="https://order.inverser.pro/amp" style="font-size:22px;color:#0086ff;font-weight:bolder;">order.inverser.pro/amp</a></p>
<p><strong>Email:</strong> ' . $email . '</p>
<p><strong>Телефон:</strong> ' . $phone . '</p>
<p><strong>Скидка:</strong> 5%</p>
<p><strong>_SID_:</strong> ' . session_id() . '</p>';
$message .= '<p><strong>Текст обращения: </strong><pre>' . $text . '</pre></p>
<p><strong>IP:</strong> ' . $ip_client_sub . '</p>
<p><strong>UserAgent:</strong> ' . $agent . '</p>
<p><strong>Дата:</strong> ' . $date . '</p>';
function validate_phone_number($phone)
{
$filtered_phone_number = filter_var($phone, FILTER_SANITIZE_NUMBER_INT);
$phone_to_check = str_replace("-", "", $filtered_phone_number);
if (iconv_strlen($phone, 'UTF-8') != preg_match_all("/[^A-Za-zА-Яа-яёЁ]/", $phone)) {
return false;
}
if (strlen($phone_to_check) < 10 || strlen($phone_to_check) > 20) {
return false;
} else {
return true;
}
}
if (validate_phone_number($phone) == false) {
echo json_encode(array('errmsg' => "Проверьте телефон «{$phone}», он НЕ должен содержать буквы."), JSON_UNESCAPED_UNICODE);
exit;
}
if ($phoneLen < 10) {
echo json_encode(array('errmsg' => 'Проверьте телефон «{$phone}», он должен быть более 9 символов.'), JSON_UNESCAPED_UNICODE);
exit;
}
if ($emailLen < 8) {
echo json_encode(array('errmsg' => "Проверьте email «{$email}», он должен быть более 8 символов."), JSON_UNESCAPED_UNICODE);
exit;
}
if ($txtLen < 5) {
echo json_encode(array('errmsg' => 'Текст должен быть больше 5 символов!'), JSON_UNESCAPED_UNICODE);
exit;
}
$to = "<go@SITE.COM>";/*TO ME*/
$headers = "Content-type: text/html; charset=utf-8 \r\n";
$headers .= "From: Inverser.PRO <go@SITE.COM>\r\n";
$headers .= "Reply-To: Inverser.PRO <go@SITE.COM>\r\n";
/*/ For Sending Error Use this code /*/
if (!mail($to, "Новое обращение AMP {$date}", $message, $headers)) {
header("HTTP/1.0 412 Precondition Failed", true, 412);
echo json_encode(array('errmsg' => 'Возникла ошибка!'), JSON_UNESCAPED_UNICODE);
exit;
} else {
/*/--Assuming all validations are good here--*/
header("Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin");
//Все проверки успешно прошли. Отправим пользователю на frontend сообщение об успехе
echo json_encode(array('successmsg' => 'Мы вскоре свяжемся с Вами.'), JSON_UNESCAPED_UNICODE);
}
$to = $email;
//Здесь верстка email-сообщения для отправки клиенту красивого письма
$message = '
<div style="border:3px solid #333;font-family:Calibri,monospace;background:#2f2f2f;color:#fff;border-radius:3px;max-width:630px;margin:0 auto">
<img style="display:block;margin:0;border-bottom: 1px solid #333;border-radius: 3px 3px 0 0;width:100%;max-width:630px" src="https://order.inverser.pro/sys/logo.jpg" alt="order.inverser.pro">
<div style="padding:9px;background:url(\'https://order.inverser.pro/sys/mailBg.jpg\')50% 50% /cover no-repeat"">
<h1 style="text-align: center;color:#f5f5f5">Здравствуйте.</h1>
Вы обратились к нам через наш сайт <a href="https://order.inverser.pro/#email" style="color:#0086ff">order.inverser.pro</a>
<br>Мы постараемся связаться с Вами как можно скорее, чтобы обсудить все детали Вашего обращения.
<hr style="border:0;border-bottom:1px dotted #333">
<p><strong>Ваша скидка:</strong> 5%</p>
<p>Будьте так добры, проверьте данные, которые Вы указали:</p>
<blockquote>
Ваш телефон: ' . $phone . '
<br>Текст обращения:
<pre>
' . $text . '
</pre>
</blockquote>
<br>Если все верно, ожидайте звонка или email-сообщения от нас.
<hr style="border:0;border-bottom:1px dotted #333">
<p><strong>За дополнительной информацией обращайтесь</strong>:
<br><div style="width:90px;display: inline-block">VK:</div> <a style="color:#0086ff" href="https://vk.com/inverser">vk.com/inverser</a>
<br><div style="width:90px;display: inline-block">Facebook:</div> <a style="color:#0086ff" href="https://facebook.com/inverser">facebook.com/inverser</a>
<br><div style="width:90px;display: inline-block">Telegram:</div> <a style="color:#0086ff" href="https://t.me/inverser">telegram</a>
</p>
<hr style="border:0;border-bottom:1px dotted #333">
<p style="font-size: 12px;color:#ccc;text-align: justify">Данное письмо сгенерировано автоматически. Однако, Вы можете ответить на него.</p>
<div style="text-transform:uppercase;display:inline-block;text-align:center;width:100%"><a href="https://order.inverser.pro/#email" style="color:#fff;text-decoration:none">Inverser – Powerful web-based technologies</a></div>
</div>
</div>
';
if (!mail($to, "Благодарим за обращение {$date}", $message, $headers)) {
//отправляем сообщение об ошибке, если что
echo json_encode(array('errmsg' => 'Возникла ошибка!'), JSON_UNESCAPED_UNICODE);
}
exit;
}
header('HTTP/2.0 404 Not found');
header('Location:/#err');
exit;