GP | feat: Добавил уточнение, что надо качать только ветку master или with-phpmailer

Co-authored-by: Anton.AE <ab.an.ev@yandex.ru>
Reviewed-on: #1

.htaccess

@@ -0,0 +1,14 @@
+<IfModule mod_rewrite.c>
+    # Редирект: ...// -> .../
+    RewriteCond %{REQUEST_URI} (.*)\/\/$
+    RewriteRule ^(.*)$ https://%{HTTP_HOST}/%1/ [R=301,L]
+
+    # Редирект: с www -> без www
+    RewriteCond %{HTTP_HOST} ^www\.(.*)$
+    RewriteRule ^(.*)$ https://%{HTTP_HOST}/$1 [R=301,L]
+
+    # Редирект: HTTP -> HTTPS
+    RewriteCond %{HTTP:X-Forwarded-Proto} !https
+    RewriteCond %{HTTPS} off
+    RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+</IfModule>

PHPMailer/Exception.php

@@ -0,0 +1,40 @@
+<?php
+
+/**
+ * PHPMailer Exception class.
+ * PHP Version 5.5.
+ *
+ * @see       https://github.com/PHPMailer/PHPMailer/ The PHPMailer GitHub project
+ *
+ * @author    Marcus Bointon (Synchro/coolbru) <phpmailer@synchromedia.co.uk>
+ * @author    Jim Jagielski (jimjag) <jimjag@gmail.com>
+ * @author    Andy Prevost (codeworxtech) <codeworxtech@users.sourceforge.net>
+ * @author    Brent R. Matzelle (original founder)
+ * @copyright 2012 - 2020 Marcus Bointon
+ * @copyright 2010 - 2012 Jim Jagielski
+ * @copyright 2004 - 2009 Andy Prevost
+ * @license   https://www.gnu.org/licenses/old-licenses/lgpl-2.1.html GNU Lesser General Public License
+ * @note      This program is distributed in the hope that it will be useful - WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.
+ */
+
+namespace PHPMailer\PHPMailer;
+
+/**
+ * PHPMailer exception handler.
+ *
+ * @author Marcus Bointon <phpmailer@synchromedia.co.uk>
+ */
+class Exception extends \Exception
+{
+    /**
+     * Prettify error message output.
+     *
+     * @return string
+     */
+    public function errorMessage()
+    {
+        return '<strong>' . htmlspecialchars($this->getMessage(), ENT_COMPAT | ENT_HTML401) . "</strong><br />\n";
+    }
+}

README.md

@@ -1,7 +1,6 @@
-# Требования к верстке
+## **Требования к верстке**
 
-
-## С точки зрения веб-разработки:
+### **С точки зрения веб-разработки:**
 * верстаем на чистом HTML/CSS с использованием flex и grid (без подключение библиотек типа bootstrap и т.п.)
 * при именовании блоков используем методологию **БЭМ в стиле "Two Dashes"**:
     `block-name__elem-name--mod-name--mod-val`
@@ -12,10 +11,10 @@
     + значение модификатора отделяется от его имени двумя дефисами (--)
 * из конечного HTML-файла убрать все комментарии, если такие имеются 
 * все медиазапросы пишутся в отдельных файлах (которые мы подготовили) для того чтобы оптимизировать скорость загрузки; если используется препроцессор, то не нужно в классе каждого блока использовать импорты медиа запросов, а наоборот выносим  пример можно посмотреть на ["видео"](https://www.youtube.com/watch?v=9uaENbRyVT4)
-<!-- * для всех страниц прописывать уникальный класс в \<body\>, от которого строить CSS-правила  -->
+* **ВАЖНО:** если верстка делается для многостраничного сайта (особенно на CMS), то для всех страниц прописывать уникальный класс в \<body\>, от которого строить все CSS-правила на этой странице + для кажой станицы использовать свои отдельные CSS-файлы   
 
 
-## С точки зрения SEO:
+### **С точки зрения SEO:**
 * все теги использовать строго по назначению! Текстовые (strong, b, i, em, h1-h6… p) используем только в текстовых блоках и заголовках. Для дизайна используем div и span. Например не нужно втыкать в подвал, шапку или формы захвата h4 или закрывать просто крупный текст, который не является заголовком в h2.
 * на странице должен быть только один заголовок первого уровня (h1) 
 * должны присутствовать все основные теги и атрибуты — html, head, body, title, description, lang=ru, content=html, charset=utf8
@@ -23,13 +22,33 @@
 * для \<img\> самостоятельно проставляем атрибут alt="", со значением описывающим того что изображено на картинке
 
 
-## Оптимальный порядок действий
-1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл style-core.css 
-2. Все шрифты выкачать и сохранить локально в директорию /assets/fonts/ и подключить их в файле style-core.css
-3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Для удобства подготовлен файл "ui_kit.html" 
-3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из style-core.css
+## **Порядок работы**
+
+### **Подготовка окружения для локальной разработки**
+1. Выкачивать локально на свой компьютер один из 2х шаблонов (по веткам: 1 - master, 2 - with-phpmailer) командой: `git clone -b ${branch_name} https://git.good-production.xyz/Good-Production/template-for-verstka.git`
+
+заменить переменную: 
+`${branch_name}` -- на "master", если достаточно только отправки форм в ТГ, либо "with-phpmailer", если нужна отправка на почту средствами PHP (без использования плагинов CMS)
+
+2. Далее создать свою ветку командой: `git checkout -b ${project_name}--${name}`
+3. Приступить к локальной разработке в созданной ветке
+4. Для демонстрации работы пушить свои комиты в созданную ветку командой: `git push origin ${project_name}--${name}`
+    - во время push для авторизации понадобиться логин/пароль: `freelancer/freelancerfreelancer00`
+5. Отписать в чат, чтоб руководитель проектом посмотрел результат и выкачал его на тестовый стенд
+
+в командах заменить переменные: 
+`${project_name}` -- условное названия проекта (как варинат использовать домен сайта)
+`${name}` -- имя/ник исполнителя
 
 
-### Примечания
+## **Оптимальный порядок непосредственно в процессе верстки**
+1. Сначала определить CSS-переменные для основных цветов/градиентов, начертаний шрифтов (толщина, размер, модификация, межтрочный интервал) и занести в специально подгтовленный CSS-файл `style-core.css` 
+2. Все шрифты выкачать и сохранить локально в директорию `/assets/fonts/` и подключить их в файле `style-core.css`
+3. Далее начинать стоит с верстки UI kit (должен быть предоставлен в макете дизайнером), для того чтобы переиспользовать готовые элементы по ходу верстки макетов. Стили для UI kit писать так же в файл `style-core.css`. 
+Саму HTML-верстку для UI kit делать в файле `ui_kit.html` 
+3. Как UI kit будет готов, можно смело переходить к верстке основных листов макета "*.html" и просто использовать готовые классы из `style-core.css`
+
+
+### **Примечания**
 
 Для работы с Figma рекомендуем использовать плагин ["Inspect Styles"](https://www.figma.com/community/plugin/1254262542670221199) для инспевтирования CSS-свойсв.

assets/css/gp-style-core.css

@@ -1,3 +1,8 @@
+/* Переменные, шрифты, UI kit */
+
+
+
+
 /* 
 
 ШАБЛОН использования глобальных переменных:

assets/css/gp-style-desktop.css

@@ -1,4 +1,18 @@
-/* Стили для лептопов  */
-@media only screen and (min-width: 992px) and (max-width: 1400px) {
+/* Основные стили для компьютера */
 
-}
+
+
+/* писать сюда... */
+
+
+
+
+
+
+
+
+
+/* Стили для лептопов  */
+/* @media only screen and (min-width: 992px) and (max-width: 1400px) {
+
+} */

index.html

@@ -8,15 +8,61 @@
         <meta name="description" content="SEO Description">
         <link rel="shortcut icon" href="/assets/img/favicon.ico?v=1.0">
 
+        <!-- Базовые стили -->
         <link rel="stylesheet" href="/assets/css/gp-style-core.css?v=1.0">
-        <link rel="stylesheet" media="screen and (min-width: 1720px)" href="/assets/css/gp-style-ultra.css?v=1.0">
-        <link rel="stylesheet" media="screen and (max-width: 1720px)" href="/assets/css/gp-style-desktop.css?v=1.0">
-        <link rel="stylesheet" media="screen and (max-width: 1024px)" href="/assets/css/gp-style-tablet.css?v=1.0">
-        <link rel="stylesheet" media="screen and (max-width: 480px)" href="/assets/css/gp-style-mobile.css?v=1.0">
+        <link rel="stylesheet" href="/assets/css/gp-style-desktop.css?v=1.0">
+        <!-- Адаптив -->
+        <link rel="stylesheet" media="screen and (min-width: 1400px)" href="/assets/css/gp-style-ultra.css?v=1.0">
+        <link rel="stylesheet" media="screen and (max-width: 992px)" href="/assets/css/gp-style-tablet.css?v=1.0">
+        <link rel="stylesheet" media="screen and (max-width: 576px)" href="/assets/css/gp-style-mobile.css?v=1.0">
+    
+
+        <!-- Яндекс.Вебмастер + Google Search Console -->
+        <meta name="yandex-verification" content="XXXXXXXXXXXXXXXXX" />
+        <meta name="google-site-verification" content="XXXXXXXXXXXXXXXXX" />
+        <!-- /Яндекс.Вебмастер + Google Search Console -->
+
+        <!-- Yandex.Metrika counter -->
+        <script type="text/javascript">
+            (function (m, e, t, r, i, k, a) {
+                m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
+                m[i].l = 1 * new Date();
+                for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
+                k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
+            })
+                (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+            ym(XXXXXX, "init", { // XXXXXX - счетчик
+                clickmap: true,
+                trackLinks: true,
+                accurateTrackBounce: true,
+                webvisor: true,
+                ecommerce: "dataLayer"
+            });
+        </script>
+        <noscript>
+            <div><img src="https://mc.yandex.ru/watch/85828806" style="position:absolute; left:-9999px;" alt="" /></div>
+        </noscript>
+        <!-- /Yandex.Metrika counter -->
+    
+    
     </head>
     <body>
 
         
+        <!-- Пример формы для отправки в Телеграмм (обработчик send-telegram.php) -->
+        <form class="form" method="post" action="/send-telegram.php">
+            <div class="form__item">
+                <input class="form__input" type="text" name="name" required>
+                <label class="form__label">Ваше имя</label>
+            </div>
+            <div class="form__item">
+                <input class="form__input" type="text" name="phone" required>
+                <label class="form__label">Номер телефона</label>
+            </div>
+            <input class="form__input btn" type="submit" value="Отправить">
+        </form>
+
 
         <script src="/assets/js/gp-main.js"></script>
     </body>

send-SMTP.php

@@ -0,0 +1,29 @@
+<?php
+use PHPMailer\PHPMailer;
+use PHPMailer\Exception;
+
+require 'PHPMailer/Exception.php';
+require 'PHPMailer/PHPMailer.php';
+require 'PHPMailer/SMTP.php';
+
+$mail = new PHPMailer;
+$mail->isSMTP(); 
+$mail->SMTPDebug = 2; // 0 = off (for production use) - 1 = client messages - 2 = client and server messages
+$mail->Host = "smtp.gmail.com"; // use $mail->Host = gethostbyname('smtp.gmail.com'); // if your network does not support SMTP over IPv6
+$mail->Port = 587; // TLS only
+$mail->SMTPSecure = 'tls'; // ssl is depracated
+$mail->SMTPAuth = true;
+$mail->Username = $smtpUsername;
+$mail->Password = $smtpPassword;
+$mail->setFrom($emailFrom, $emailFromName);
+$mail->addAddress($emailTo, $emailToName);
+$mail->Subject = 'PHPMailer GMail SMTP test';
+$mail->msgHTML("test body"); //$mail->msgHTML(file_get_contents('contents.html'), __DIR__); //Read an HTML message body from an external file, convert referenced images to embedded,
+$mail->AltBody = 'HTML messaging not supported';
+// $mail->addAttachment('images/phpmailer_mini.png'); //Attach an image file
+
+if(!$mail->send()){
+    echo "Mailer Error: " . $mail->ErrorInfo;
+}else{
+    echo "Message sent!";
+}

send-telegram.php

@@ -0,0 +1,38 @@
+<?php
+/* Пример из: https://vc.ru/dev/158136-kak-otpravlyat-zayavki-s-lendinga-pryamo-v-telegram */
+
+
+//В переменную $token нужно вставить токен, который нам прислал @botFather
+$token = "1094153697:AAFiLXXXXXLl0hRDsxBij1lddKydKxSSsOg04";
+
+//Сюда вставляем chat_id
+$chat_id = "-40XXXX740";
+
+//Определяем переменные для передачи данных из нашей формы
+if ($_POST['phone'] !== '') {
+    $name = ($_POST['name']);
+    $phone = ($_POST['phone']);
+
+    //Собираем в массив то, что будет передаваться боту
+    $arr = array(
+        'Имя:' => $name,
+        'Телефон:' => $phone
+    );
+
+    //Настраиваем внешний вид сообщения в телеграме
+    foreach($arr as $key => $value) {
+        $txt .= "<b>".$key."</b> ".$value."%0A";
+    };
+
+    //Передаем данные боту
+    $sendToTelegram = fopen("https://api.telegram.org/bot{$token}/sendMessage?chat_id={$chat_id}&parse_mode=html&text={$txt}","r");
+
+    //Выводим сообщение об успешной отправке
+    if ($sendToTelegram) {
+        echo 'Спасибо! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.';
+    }else{
+        echo 'Что-то пошло не так. Попробуйте отправить форму ещё раз.';
+    }
+}
+
+?>