Дизайн поисковой строки (продолжение2)
{"ops":[{"insert":"Прозрачная форма у которой меняется цвет границы, при активации, "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форма 7 (Посмотреть...)"},{"insert":":\n<form class=\"bforma\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"text\" class=\"bfild\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"bbut\" type=\"submit\"></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Стили формы 7 :\n<style> /* Стили для формы 7 */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bforma{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 300px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" margin: 0 auto;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild, .bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" outline: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 100%;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding-left: 15px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: 3px solid #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-webkit-input-placeholder {color:#fff; opacity:1;}/* webkit */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild::-moz-placeholder {color:#fff; opacity:1;}/* Firefox 19+ */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-moz-placeholder {color:#fff; opacity:1;}/* Firefox 18- */"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:-ms-input-placeholder {color:#fff; opacity:1;}/* IE */"},{"attributes":{"code-block":true},"insert":"\n\n"},{"insert":".bbut{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 42px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 0;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" cursor: pointer;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bbut:before{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" content: \"\\f002\";"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-family: FontAwesome;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" font-size: 16px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" color: #F9F0DA;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".bfild:focus{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-color: yellowgreen;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}
{"ops":[{"insert":"Давайте рассмотрим другие варианты оформления, например, если у вас подключены "},{"attributes":{"bold":true},"insert":"Bootstrap"},{"insert":" и "},{"attributes":{"bold":true},"insert":"Font-awesome"},{"insert":", вы можете сделать форму поиска, как на моем сайте.\n<form action=\"\" method=\"get\" class=\"input-group\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <input type=\"search\" name=\"search\" class=\"form-control search\" placeholder=\"Поиск...\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <span class=\"input-group-btn\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" <button class=\"btn btn-default\" type=\"submit\"><i class=\"fa fa-search\"></i></button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </span>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Добавим стили и получим "},{"attributes":{"link":"https://programmerblog.ru/postExample"},"insert":"форму 4 (Посмотреть...):"},{"insert":"\n<style> /*Стили для формы 4*/"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":".search{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" z-index: 0; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" width: 250px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-radius: 45px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: relative; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-style: double; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border-width: 2px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" border: double 2px transparent;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: linear-gradient(white, white), radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -webkit-linear-gradient(white, white), -webkit-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -moz-linear-gradient(white, white), -moz-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -ms-linear-gradient(white, white), -ms-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-image: -o-linear-gradient(white, white), -o-radial-gradient(circle at top left, #1b2361, #9a1a38);"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-origin: border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background-clip: content-box, border-box;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" padding: 0 0 0 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" text-indent: 20px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .btn-default{"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" height: 30px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" background: #fff; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" position: absolute; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" right: 20px; "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" top: 2px;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" </style>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" "},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"\n"}]}
{"ops":[{"insert":"Для начала у вас уже должен быть готовый проект Laravel, хотя бы с одной страницей на которой мы разместим кнопку открытия нашего модального окна.\nУстанавливаем Livewire\ncomposer require livewire/livewire"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Устанавливаем компонент LivewireUI Modal\ncomposer require livewire-ui/modal"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Публикуем модульный шаблон\nphp artisan vendor:publish --tag=livewire-ui-modal-views"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Создаем модель\nphp artisan make:livewire ModalContact"},{"attributes":{"code-block":true},"insert":"\n"},{"attributes":{"color":"white"},"insert":" "},{"insert":"\nРедактируем "},{"attributes":{"bold":true},"insert":"ModalContact"},{"insert":" в "},{"attributes":{"bold":true},"insert":"app/Http/Livewire"},{"insert":"\n\n"},{"attributes":{"color":"yellow"},"insert":"<?php"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" namespace App\\Http\\Livewire;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" use LivewireUI\\Modal\\"},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent;"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class ModalContact extends "},{"attributes":{"color":"yellow","background":"green"},"insert":"ModalComponent"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"{"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" public function render()"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" {"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" return view('livewire.modal-contact');"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" }"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"}"},{"insert":"\n \nВносим редактирование в "},{"attributes":{"bold":true},"insert":"modal.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/vendor/livewire-ui-modal "},{"insert":"\n"},{"attributes":{"bold":true},"insert":" "},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"<div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @isset($jsPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <*script>{!! file_get_contents($jsPath) !!}</*script>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @isset($cssPath)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <*style>{!! file_get_contents($cssPath) !!}</*style>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @endisset"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-data=\"LivewireUIModal()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-init=\"init()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-on:close.stop=\"setShowPropertyTo(false)\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-on:keydown.escape.window=\"closeModalOnEscape()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-on:keydown.tab.prevent=\"$event.shiftKey || nextFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-on:keydown.shift.tab.prevent=\"prevFocusable().focus()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class=\"fixed inset-0 z-10 overflow-y-auto\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"display: none; margin-top: 0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div class=\"flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-show=\"show\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-on:click=\"closeModalOnClickAway()\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter-start=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter-end=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave-start=\"opacity-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave-end=\"opacity-0\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class=\"fixed inset-0 transition-all transform\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div class=\"absolute inset-0 bg-gray-500 opacity-75\"></div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <span class=\"hidden sm:inline-block sm:align-middle sm:h-screen\" aria-hidden=\"true\">​</span>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-show=\"show && showActiveComponent\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter=\"ease-out duration-300\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter-start=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:enter-end=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave=\"ease-in duration-200\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave-start=\"opacity-100 translate-y-0 sm:scale-100\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-transition:leave-end=\"opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" x-bind:class=\"modalWidth\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" class=\"inline-block w-full align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" id=\"modal-container\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" "},{"attributes":{"color":"yellow","background":"green"},"insert":" style=\"margin-bottom: 250px; z-index: 1000000000000000000;\""},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" >"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @forelse($components as $id => $component)"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" <div x-show.immediate=\"activeComponent == '{{ $id }}'\" x-ref=\"{{ $id }}\" wire:key=\"{{ $id }}\">"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @livewire($component['name'], $component['attributes'], key($id))"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @empty"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" @endforelse"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":" </div>"},{"insert":"\n"},{"attributes":{"color":"yellow"},"insert":"</div>"},{"insert":"\n \nРедактируем стили для корректного отображения модульного окна (в зависимости от размеров окна стили могут меняться)\nИ создаем само окно "},{"attributes":{"bold":true},"insert":"modal-contact.blade.php "},{"insert":"в "},{"attributes":{"bold":true},"insert":"resources/views/livewire "},{"insert":"в котором мы можем разместить все что нам нужно.\n \nТакже мы можем создавать сколько угодно модульных окон создавая другие модели\nphp artisan make:livewire ModalName"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Теперьнам осталось только разместить кнопку на странице\n<button class=\" \" onclick=\"Livewire.emit('openModal', 'modal-contact')\">Модальное окно</button>"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Удачи!\n"}]}
{"ops":[{"attributes":{"underline":true,"bold":true},"insert":"(Начало в предыдущей статье."},{"attributes":{"bold":true},"insert":") "},{"insert":"Следующее свойство для скрытия элемента visibility. Если установить значение "},{"attributes":{"bold":true},"insert":"hidden"},{"insert":", то элемент будет скрыт. Как и со свойством "},{"attributes":{"bold":true},"insert":"opacity"},{"insert":", скрытый с помощью данного свойства элемент не виден, но остается на макете страницы. Отличается это свойство тем, что данное свойство запрещает взаимодействовать со скрытым элементом. Данное свойство также поддается анимации, у него можно менять начальное и конечное значения. т.е. можно плавно анимировать свойство при помощи "},{"attributes":{"bold":true},"insert":"transition"},{"insert":". Дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство "},{"attributes":{"bold":true},"insert":"visibility: visible"},{"insert":". \nПроведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer, и если кликнуть в этой области, то ничего не произойдет, но при наведении курсора мыши на текст блок станет видимым и начнет обрабатывать события. Мы можем это увидеть кликнув по числу находящемуся в центре второго блока. \n"}]}
{"ops":[{"insert":"Сегодня я расскажу вам как можно скрыть блок в разметке HTML. Все очень просто, самый простой способ это задать в стилях для нужного блока:\n.block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Зачем нам это нужно, например у нас существует страница и при переходе на мобильную версию, мы хотим упростить ее и не показывать данные из какого-то блока, и этот способ может очень нам помочь, достаточно только добавить миксин в стили, с классом нашего блока, например:\n@media (max-width: 767px) {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" .block {"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" display: none;"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":" }"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"}"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"Давайте создадим три блока и уберем один из разметки, средствами "},{"attributes":{"bold":true},"insert":"CSS"},{"insert":".\n"}]}
{"ops":[{"insert":"Сегодня я расскажу вам, как произвести один из этапов оптимизации вашего сайта на Laravel. Для оптимизации вашего сайта вам может понадобиться "},{"attributes":{"bold":true},"insert":"Sitemap"},{"insert":" или карта сайта. Нужна она для того, чтобы "},{"attributes":{"bold":true},"insert":"Google"},{"insert":" или "},{"attributes":{"bold":true},"insert":"Яндекс"},{"insert":" сообщали своим поисковым роботам обо всех ваших страницах и их URL-адресах для их индексирования. \n"},{"attributes":{"bold":true},"insert":"Sitemap"},{"insert":" можно сгенерировать несколькими способами. Вы можете использовать "},{"attributes":{"bold":true},"insert":"Sitemap"},{"insert":" генератор, если у вас статичный сайт и данные на нем не меняются, например "},{"attributes":{"bold":true},"insert":"XML-Sitemap"},{"insert":".com или любой другой. Если же у вас динамический сайт вы можете воспользоваться специальным пакетом тут или сделать sitemap самим, как будет описано ниже.\n"}]}
{"ops":[{"insert":"Здравствуйте дорогие читатели моего блога. Сегодня я хочу рассказать вам, как можно оформить строку поиска. Строка поиска на моей странице достаточно простая. Для меня, в первую очередь было важно, чтобы она вписывалась в дизайн блога. Сегодня с вами хочу поделиться красивыми формами поиска для сайта или блога. Но знайте, это просто форма поиска, без обработчика. Статью, как написать простой обработчик на PHP я уже выкладывала в своем блоге. Так что сегодня мы поговорим о верстке и дизайне. \nНачну пожалуй с самой простой формы:\n<form class=\"for\" method=\"get\" action=\"\">"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"<input class=\"search\" name=\"search\" id=\"search\" placeholder=\"Поиск..\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"<input class=\"search-btn\" type=\"submit\" value=\"ok\" />"},{"attributes":{"code-block":true},"insert":"\n"},{"insert":"</form>"},{"attributes":{"code-block":true},"insert":"\n"}]}
{"ops":[{"attributes":{"bold":true},"insert":"Quill"},{"insert":" — это современный богатый совместимый и расширяемый текстовый редактор от известной компании Salesforce.com. «Перо» было разработано с целью избавиться от классического представления о WYSIWYG. На самом деле "},{"attributes":{"bold":true},"insert":"Quill "},{"insert":"очень гибкий и очень очень модульный. Стоит посмотреть документацию к API, после чего сразу будет понятно, что написан проект по-умному.\nПосле загрузки"},{"attributes":{"bold":true},"insert":" Quill"},{"insert":" (смотрите в предыдущей статье) установим "},{"attributes":{"bold":true},"insert":"Quill"},{"insert":" в наш проект, для этого в "},{"attributes":{"bold":true},"insert":"Html"},{"insert":" нашей страницы, создадим form.\n"}]}
