1. Аккаунт и вход

Перед использованием HtmlDrag вам необходимо создать аккаунт. Мы предоставляем несколько способов регистрации и входа, чтобы помочь вам быстро начать работу.

1.1 Регистрация

HtmlDrag использует регистрацию по email. Просто заполните несколько основных данных, чтобы создать аккаунт. После успешной регистрации вы будете автоматически авторизованы и перенаправлены на главную страницу.

Регистрация по email

На странице регистрации выполните следующие шаги для создания аккаунта:

• Введите email: Укажите часто используемый адрес электронной почты. Он будет служить вашим логином и каналом для уведомлений. Убедитесь, что формат email правильный, например, [email protected].
• Установите пароль: Пароль должен содержать буквы и цифры, длиной от 8 до 32 символов. Рекомендуем использовать надёжный пароль для защиты аккаунта.
• Подтвердите пароль: Введите пароль повторно, чтобы убедиться, что оба совпадают.
• Установите никнейм (необязательно): Вы можете настроить свой никнейм. Если оставить пустым, система автоматически сгенерирует никнейм по умолчанию.
• Согласие с условиями: Отметьте «Я прочитал и согласен с Условиями использования и Политикой конфиденциальности», затем нажмите кнопку «Зарегистрироваться» для завершения регистрации.

Страница регистрации: введите email и основную информацию для создания аккаунта

Подтверждение email и бонусные кредиты

После успешной регистрации система отправит письмо с подтверждением на ваш почтовый ящик. После подтверждения email вы получите бонусные кредиты, которые можно использовать для функций AI-генератора и импорта URL. Если вы не получили письмо, проверьте папку «Спам»; вы можете нажать «Отправить повторно» для запроса нового письма через 3 минуты.

Совет: Подтверждение email не только даёт вам бонусные кредиты, но и открывает полный доступ к функциям и повышает безопасность аккаунта.

1.2 Вход

HtmlDrag поддерживает несколько способов входа. Выберите наиболее удобный вариант.

Вход по email и паролю

Войдите, используя email и пароль, указанные при регистрации:

1. Введите адрес электронной почты на странице входа
2. Введите пароль (нажмите на значок глаза, чтобы показать/скрыть пароль)
3. Нажмите кнопку «Продолжить» для завершения входа

После успешного входа вы будете автоматически перенаправлены на главную страницу, где можете начать создавать.

Вход через сторонние сервисы (Google / GitHub)

Для быстрого доступа вы можете войти через аккаунт Google или GitHub:

• Вход через Google: Нажмите кнопку «Войти через Google». Во всплывающем окне авторизации Google выберите аккаунт и подтвердите доступ.
• Вход через GitHub: Нажмите кнопку «Войти через GitHub». Вы будете перенаправлены на страницу авторизации GitHub. После подтверждения вы автоматически вернётесь в HtmlDrag.

Страница входа: поддержка email/пароля и сторонних аккаунтов

Совет: При входе через Google или GitHub аккаунт создаётся автоматически — отдельная регистрация не требуется. При первом входе через сторонний сервис система автоматически создаст связанный аккаунт.

Ссылка «Забыли пароль»

Если вы забыли пароль, нажмите ссылку «Забыли пароль?» в правом нижнем углу страницы входа, чтобы перейти к процессу сброса пароля (см. раздел 1.3).

1.3 Забыли пароль

Если вы забыли пароль, вы можете сбросить его с помощью кода подтверждения по email. Весь процесс выполняется на одной странице без перенаправлений.

Процесс сброса пароля

Выполните следующие шаги для сброса пароля:

1. Введите email: Укажите адрес электронной почты, использованный при регистрации
2. Получите код подтверждения: Нажмите кнопку «Отправить код». Система отправит письмо с 6-значным кодом подтверждения
3. Введите код подтверждения: Введите полученный 6-значный код в поле для кода
4. Установите новый пароль: Введите новый пароль (должен содержать буквы и цифры, длиной 8-32 символа)
5. Подтвердите новый пароль: Введите новый пароль повторно, чтобы убедиться, что они совпадают
6. Нажмите «Сбросить пароль»: Завершите сброс пароля. После появления сообщения об успехе вы будете автоматически перенаправлены на страницу входа

Забыли пароль: сброс через код подтверждения по email

Срок действия кода подтверждения

Код подтверждения имеет ограниченный срок действия — используйте его сразу после получения письма. Если код истёк, вы можете нажать кнопку «Отправить повторно» для запроса нового кода (нужно дождаться окончания обратного отсчёта).

Примечание: Если ваш email не зарегистрирован в системе, код подтверждения не будет отправлен. Убедитесь, что вы вводите адрес электронной почты, использованный при регистрации.

2. Профиль

Профиль — это центр управления информацией об аккаунте, работами и заказами. Нажмите на аватар в правом верхнем углу, чтобы получить доступ.

Профиль: управление аккаунтом, работами и заказами в одном месте

2.1 Настройки профиля

Модуль настроек профиля позволяет управлять основной информацией об аккаунте, включая аватар, никнейм, email, описание и настройки пароля.

Изменение аватара

Нажмите кнопку «Изменить аватар» в области аватара и выберите локальный файл изображения для загрузки. Система автоматически обрежет и сохранит ваш новый аватар.

Изменение никнейма

Нажмите кнопку редактирования рядом с никнеймом, введите новое имя и нажмите «Сохранить». Ваш никнейм будет отображаться на всех ваших работах и комментариях.

Управление email

Раздел email показывает ваш текущий адрес электронной почты и статус подтверждения:

• Подтверждён: Ваш email подтверждён, все функции доступны
• Не подтверждён: Нажмите «Отправить письмо подтверждения», чтобы завершить проверку и получить бонусные кредиты
• Изменить email: Сначала необходимо подтвердить текущий email, затем ввести новый адрес для завершения изменения

Описание

Введите своё описание в соответствующей области (рекомендуется не более 200 символов), затем нажмите «Сохранить» для обновления.

Изменение пароля / Установка пароля

Нажмите кнопку «Изменить пароль», чтобы открыть диалог настроек пароля:

• Пользователи с существующим паролем: Введите текущий пароль, затем установите новый пароль (8-32 символа, включая буквы и цифры)
• Пользователи без пароля: Установите новый пароль напрямую. После установки вы сможете входить по email и паролю

Удаление аккаунта

Для удаления аккаунта нажмите кнопку «Удалить аккаунт» внизу страницы. В целях безопасности вам потребуется подтвердить личность с помощью кода подтверждения по email.

Примечание: После отправки запроса на удаление ваш аккаунт войдёт в период хранения (обычно 30 дней), в течение которого вы не сможете входить. По истечении этого периода система навсегда удалит ваши работы, кредиты и историю.

Профиль: управление аватаром, никнеймом, email и паролем

2.2 Использование хранилища

Модуль использования хранилища отображает потребление дискового пространства вашим аккаунтом, помогая понять оставшееся место и планировать свои работы.

Обзор хранилища

Верхний раздел показывает общее использование, включая:

• Использовано: Объём занятого дискового пространства
• Всего: Лимит хранилища вашего аккаунта (пользователи Proа получают больший объём)
• Осталось: Доступное пространство для создания новых работ
• Сохранённые работы: Текущее количество сохранённых работ и лимит

Распределение хранилища

Система делит хранилище на три категории:

• HTML-контент: Пространство, используемое кодом веб-страниц ваших работ
• Изображения: Пространство, используемое загруженными файлами изображений
• Другие ресурсы: Пространство, используемое другими вложениями

Лимит количества работ

Пользователи бесплатного и Proа имеют разные лимиты на количество работ. При достижении лимита необходимо удалить некоторые работы или обновить план, прежде чем создавать новые.

Обновление хранилища и апгрейд

Нажмите кнопку обновления для актуализации информации о хранилище. Для получения большего объёма нажмите «Увеличить хранилище», чтобы перейти на страницу тарифов и выбрать подходящий план.

Совет: Если хранилище аккаунта заполнено или достигнут лимит работ, система заблокирует создание новых работ. Удалите некоторые работы или обновите план для восстановления возможности загрузки.

2.3 Мои работы

Модуль управления работами отображает все созданные вами работы, поддерживая просмотр, редактирование, публикацию и удаление.

Список работ и фильтры

Работы отображаются в виде карточек или списка. Вы можете фильтровать их с помощью:

• Поиск: Введите код или название работы для поиска
• Фильтр по типу: Фильтрация по AI-генератору, загрузке файла, снимку URL, вставке кода и т.д.
• Диапазон дат: Выберите начальную и конечную даты для фильтрации работ за определённый период
• Сортировка: Сортировка по новизне, дате создания, количеству лайков или просмотров

Управление работами: просмотр, фильтрация и управление всеми работами

Просмотр и редактирование работ

Нажмите кнопку «Просмотр» на карточке работы для предварительного просмотра. В интерфейсе предпросмотра вы можете:

• Редактировать название работы (дважды щёлкните по названию для редактирования)
• Нажать «Редактировать» для входа в визуальный редактор и продолжения работы
• Просмотреть историю сохранений работы и восстановить определённую версию

Управление статусом публикации

Пользователи Proа могут публиковать работы, позволяя другим просматривать их по ссылке:

• Включить публикацию: Нажмите кнопку «Поделиться» для генерации ссылки со сроком действия 7 дней
• Обновить ссылку: У уже опубликованных работ можно обновить ссылку, продлив срок действия
• Остановить публикацию: Нажмите «Остановить публикацию» для немедленной деактивации ссылки

Удаление работ

Нажмите кнопку «Удалить» на карточке работы для её удаления. Система покажет два диалога подтверждения для предотвращения случайного удаления:

1. Первое подтверждение: Запрос на подтверждение удаления работы
2. Второе подтверждение: Напоминание о том, что удаление необратимо

Совет: За раз можно удалить до 3 записей. После удаления работы её дисковое пространство освобождается.

2.4 Кредиты

Модуль истории кредитов отображает историю транзакций кредитов вашего аккаунта, включая записи о расходах и начислениях.

История транзакций кредитов

Записи о кредитах отображаются в таблице со следующей информацией:

• Дата: Когда произошло изменение кредитов
• Тип: Тип операции изменения кредитов
• Изменение кредитов: Добавленные (положительные) или списанные (отрицательные) кредиты
• Описание: Подробное объяснение изменения

Вы можете использовать фильтры по диапазону дат для просмотра записей за определённый период времени.

Типы кредитов

• AI-генератор: Кредиты, потраченные при использовании функции AI-генератора
• Импорт URL: Кредиты, потраченные при использовании функции импорта URL
• Награда за регистрацию: Кредиты, начисленные новым пользователям после регистрации и подтверждения email
• Бонус платформы: Кредиты, подаренные платформой
• Ежемесячный подарок: Ежемесячное начисление кредитов для пользователей Proа
• Пополнение кредитов: Кредиты, полученные через покупку кредитов
• Корректировка администратором: Кредиты, скорректированные администраторами вручную

История кредитов: просмотр деталей транзакций кредитов

Совет: Пользователи Proа получают дополнительные кредиты каждый месяц. Кредиты можно использовать для платных функций, таких как AI-генератор и импорт URL.

2.5 Заказы

Модуль истории заказов отображает историю покупок и платёжные записи, упрощая поиск и управление заказами.

Управление заказами

Список заказов показывает ваши записи о покупках. Вы можете:

• Просматривать статус и детали заказа
• Использовать фильтры для быстрого поиска конкретных заказов
• Продолжить оплату для ожидающих заказов
• Закрыть или удалить ненужные заказы

Совет: Если у вас возникли проблемы с оплатой, вы можете закрыть текущий заказ и создать новый.

2.6 Портфолио

Страница портфолио — это ваше пространство для просмотра и управления всеми работами. Быстрый доступ через боковую панель или меню пользователя.

Отображение работ

На странице все работы отображаются в виде карточек, каждая из которых содержит:

• Миниатюра: Визуальный предпросмотр работы для быстрой идентификации
• Название работы: Показывает название работы, нажмите для редактирования
• Время создания: Записывает, когда работа была создана
• Статус публикации: Показывает, опубликована ли работа в данный момент

Портфолио: просмотр и управление всеми работами в одном месте

Быстрые действия

Каждая карточка работы предоставляет удобные кнопки действий:

• Редактировать: Войти в визуальный редактор для продолжения работы
• Поделиться: Генерация или управление ссылками для публикации (только Pro)

3. Боковая навигация

HtmlDrag предлагает несколько способов импорта контента в редактор, охватывая все сценарии от создания с нуля до вторичной обработки. Используйте левую боковую панель для быстрого переключения между точками входа.

Боковая навигация: быстрый доступ к различным точкам входа для создания

3.1 Главная

Главная страница — это точка входа по умолчанию в HtmlDrag, где расположен AI-генератор. Введите контент здесь, чтобы быстро создать профессиональный веб-дизайн.

3.2 Импорт URL

Импорт URL позволяет ввести любую публичную ссылку на веб-страницу, и система автоматически захватит содержимое страницы и создаст редактируемую работу. Это идеальный способ быстро получить существующий веб-дизайн для дальнейшего редактирования.

Ввод URL

Вставьте адрес веб-страницы, которую хотите захватить, в поле ввода. Поддерживаются только публичные http/https ссылки; приватные или локальные адреса не допускаются.

Импорт URL: введите URL, мгновенно захватите веб-страницу

Подтверждение списания кредитов

После нажатия «Начать захват» появится диалог подтверждения списания кредитов, показывающий необходимое количество кредитов для операции, ваш текущий баланс кредитов и ежемесячные бонусные кредиты. Ежемесячные бонусные кредиты списываются первыми, оставшаяся стоимость списывается с текущих кредитов.

Прогресс и статус захвата

После подтверждения система начинает захват содержимого страницы. Пожалуйста, не покидайте страницу во время захвата во избежание прерывания. После успешного захвата вы будете автоматически перенаправлены в редактор.

Советы:

Некоторые сайты не могут быть захвачены: Сайты, требующие авторизации, или использующие сложные фронтенд-фреймворки (например, некоторые SPA-приложения), могут не захватываться или захватываться неполностью.

Аудио/видео сайты: Динамический контент с аудио и видео сайтов может захватываться некорректно.

Слишком большая страница: Если содержимое страницы превышает допустимый размер сервера, захват может не удастся. Попробуйте более простую страницу.

3.3 Загрузка HTML

Функция загрузки HTML позволяет импортировать локальные HTML-файлы в HtmlDrag. Система выполнит проверку безопасности и создаст редактируемую работу. Идеально подходит для существующих HTML-шаблонов или дизайнов email, требующих дальнейшего редактирования.

Формат файла и ограничения размера

Поддерживаются форматы .html и .htm. Размер одного файла не должен превышать системный лимит (см. конкретные ограничения в интерфейсе загрузки). Загруженные файлы проходят расширенную обработку, что может значительно увеличить фактический размер хранения по сравнению с исходным файлом. Убедитесь, что у вас достаточно свободного места.

Загрузка HTML: перетащите или нажмите для загрузки HTML-файлов

Проверка безопасности

Система сканирует загруженные файлы на безопасность, обнаруживая и удаляя потенциально вредоносные скрипты, опасные теги и подозрительные внешние ресурсы. В зависимости от уровня риска (низкий, средний, высокий, критический) система выдаст соответствующие предупреждения или заблокирует сохранение.

Примечание: Не загружайте файлы, содержащие вредоносный код. Загрузка вредоносных файлов может привести к блокировке аккаунта.

Предпросмотр и сохранение

После парсинга файла вы можете просмотреть результат в области предпросмотра. После подтверждения нажмите «Сохранить работу», чтобы сохранить работу в аккаунт, и в любое время войти в визуальный редактор для редактирования.

3.4 Вставка кода

Функция вставки кода позволяет напрямую вставить HTML-код, и система выполнит проверку безопасности и преобразует его в визуальный дизайн. Это самый гибкий способ импорта, подходящий для разработчиков или пользователей, которым нужен точный контроль над кодом.

Вставка HTML-кода

Вставьте HTML-код в область ввода кода. Вы можете указать название работы (если оставить пустым, система использует название по умолчанию «Без названия»).

Вставка кода: напрямую вставьте HTML-код для начала редактирования

Проверка безопасности

Аналогично загрузке файлов, система выполняет проверку безопасности вставленного кода. Если уровень риска кода слишком высок, политика безопасности системы откажет в обработке этого контента. Пожалуйста, проверьте код и попробуйте снова.

Примечание: Не вставляйте вредоносный код или скрипты. Злонамеренное использование может привести к блокировке аккаунта.

Генерация предпросмотра и сохранение

После ввода кода нажмите кнопку «Сгенерировать предпросмотр». После прохождения проверки безопасности предпросмотр будет сгенерирован автоматически. После подтверждения результата нажмите «Сохранить работу» для сохранения работы в аккаунт.

3.5 ИИ Генератор

ИИ Генератор лучше работает с реальными материалами: PDF, PPT/PPTX, Excel/XLSX, CSV, Word, Markdown, TXT, JPG/PNG или запросом. Опишите цель, аудиторию и стиль.

1. Загрузите материал или введите запрос.
2. AI собирает заголовки, абзацы, списки, карточки и секции.
3. Проверьте полноту, иерархию, изображения, таблицы и текст.
4. Доработайте в HtmlDrag текст, изображения, блоки, цвета и верстку.
5. Сохраните, поделитесь или скачайте HTML.

Каждому типу материала нужна своя структура.

3.6 Тарифы

Страница тарифов — это место для управления подпиской и пополнения кредитов. Выберите план, который подходит вам лучше всего, и откройте больше творческих возможностей.

Планы подписки

HtmlDrag предлагает подписки Pro и Pro Max. После оформления подписки вы можете использовать включённые преимущества в течение активного периода подписки:

Pro: Для постоянных авторов, которым нужен полный рабочий процесс редактирования HTML, AI-генерации, публикации и экспорта.

Pro Max: Для более интенсивной AI-генерации, крупных проектов и повышенных лимитов использования.

Подписки продлеваются согласно платёжному циклу, указанному при оформлении заказа. Вы можете управлять продлением или отменить его в аккаунте либо у платёжного провайдера.

Тарифы: выберите план, который подходит вам лучше всего

Пополнение кредитов

Если вам нужно временно использовать AI-генерацию или импорт URL, вы можете выбрать пополнение кредитов. Приобретённые кредиты никогда не истекают, и вы можете пополнить их в любое время при нехватке — без ожидания.

Сравнение функций

Основные различия между бесплатным и Proом следующие:

Функция	Free	Pro
AI-генерация контента	✓	✓
Все шаблоны и стили	✓	✓
Визуальный редактор	✓	✓
Скачать как PNG	✓	✓
Скачать как HTML	✗	✓
Публикация работ	✗	✓
Редактирование кода в реальном времени	✗	✓
Ежемесячные кредиты	Базовая квота	Премиум-квота
Объём хранилища	Базовый объём	Увеличенный объём

Руководство по использованию кредитов

Каждая AI-генерация потребляет фиксированное количество кредитов. Пользователи бесплатного плана получают базовые ежемесячные бонусные кредиты, пользователи Proа получают больше. Приобретённые кредиты никогда не истекают, и вы можете пополнить их в любое время при нехватке — без ожидания восстановления квоты.

3.7 История

В левой боковой панели «Мои работы» (История) предоставляет быстрый доступ к вашим прошлым работам. Здесь перечислены все ваши записи редактирования в хронологическом порядке.

Быстрый выбор и редактирование

Нажмите на любую запись в списке, чтобы быстро загрузить её в редактор и продолжить с того места, где остановились, без повторного импорта.

Детали окна предпросмотра

Наведите курсор на запись истории, чтобы увидеть её окно предпросмотра. В окне предпросмотра вы можете:

• Редактировать название напрямую: Нажмите на текст названия для мгновенного изменения имени работы.
• Просмотреть статус публикации: Иконки показывают, опубликована ли работа в данный момент.
• Быстрые действия: Доступ к редактированию, удалению и другим ярлыкам.

История: быстрый предпросмотр и управление прошлыми работами

4. Визуальный редактор

Сердце HtmlDrag — мощный WYSIWYG-редактор, позволяющий работать непосредственно в реальной HTML-среде, устраняя необходимость в редактировании кода.

4.1 Обзор интерфейса редактора

Редактор использует классическую трёхколоночную компоновку: левая навигация с историей работ, центральная область предпросмотра холста и правая функциональная панель. Верхняя и нижняя панели предоставляют действия с работой и элементы управления редактированием.

Интерфейс редактора: левая навигация, центральный холст, правая панель

Левая навигация и история

Левая навигация предоставляет быстрые точки доступа. Нажмите «Мои работы», чтобы развернуть список истории работ для быстрой навигации и переключения. Опубликованные работы отображаются с меткой «Опубликовано» для удобства управления статусом публикации.

Центральная область холста

Холст — это окно живого предпросмотра, где вы можете напрямую выбирать, перетаскивать и редактировать элементы страницы. Поддерживаются операции масштабирования и панорамирования через контроллер масштабирования внизу. Все изменения отображаются в реальном времени.

Правая панель (Редактирование / Компоненты / Слои / Библиотека)

Правая панель содержит четыре вкладки: Редактирование (настройка стилей и переключатели режимов), Компоненты (вставка новых элементов), Слои (список слоёв и пакетные операции) и Библиотека (личная библиотека компонентов). Нажмите на любую вкладку для переключения между функциями.

Верхняя панель заголовка и действий

Верхняя панель отображает название работы (дважды щёлкните для редактирования), с кнопками действий справа для публикации, скачивания как изображения и скачивания как HTML. Некоторые функции требуют привилегий Proа.

Нижняя панель инструментов

Нижняя панель инструментов предоставляет кнопки: Предпросмотр (открывается в новом окне), Отменить, Повторить, Обновить предпросмотр, Восстановить последнее сохранение, Восстановить исходный HTML и Сохранить — основные элементы управления редактированием.

4.2 Базовые операции

HtmlDrag предоставляет интуитивно понятные визуальные операции — наведение, одиночный клик, двойной клик и правый клик охватывают большинство задач редактирования.

Распознавание элементов

Наведите курсор мыши на любой элемент на холсте, и система автоматически обнаружит его и отобразит пунктирную рамку, помогая быстро идентифицировать доступные для действий элементы. Распознавание охватывает текст, изображения, кнопки, контейнеры и другие HTML-элементы.

Распознавание элементов: пунктирная рамка появляется при наведении

Режим перетаскивания

Одиночный клик на любом элементе переводит в режим перетаскивания, который отображает рамку выделения с восемью маркерами изменения размера. Вы можете: перетаскивать элемент для перемещения; перетаскивать угловые маркеры для пропорционального масштабирования; перетаскивать боковые маркеры для изменения размера в одном направлении. При выделении правая панель «Редактирование» показывает свойства стиля элемента для настройки.

Режим перетаскивания: нажмите для выбора, свободно перемещайте и изменяйте размер

Режим редактирования

Двойной клик на текстовом элементе переводит в режим редактирования — курсор позиционируется внутри текста для прямого редактирования. В режиме редактирования правая панель показывает инструменты стиля текста для шрифта, размера, цвета, жирного, курсива и другого. Нажмите вне элемента или нажмите Esc для выхода из режима редактирования.

Режим редактирования: двойной клик для входа, редактирование текста напрямую

Контекстное меню

Правый клик на выбранном элементе открывает контекстное меню, предоставляющее быстрый доступ к Копировать, Вставить, Добавить в библиотеку, редактирование ссылки, операции со слоями, Заблокировать, Скрыть, Удалить и другое. Подробности см. в 4.9 Контекстное меню.

Множественный выбор

Удерживайте Shift и кликайте на нескольких элементах, чтобы выбрать их вместе для пакетных операций. В режиме множественного выбора правая панель отображает инструменты выравнивания (выравнивание по левому/правому/верхнему/нижнему краю, центрирование по горизонтали/вертикали, распределение по горизонтали/вертикали) для быстрой организации макета.

Множественный выбор: удерживайте Shift и кликайте для выбора нескольких элементов

4.3 Панель быстрого доступа «Мои работы»

Панель быстрого доступа «Мои работы» слева позволяет разворачивать/сворачивать список работ и быстро переключаться между работами, облегчая плавные переходы между несколькими проектами.

Развернуть и свернуть

Нажмите кнопку «Мои работы» в верхнем левом углу, чтобы развернуть боковой список работ. Нажмите снова или кликните вне боковой панели, чтобы свернуть её. В развёрнутом состоянии вы можете визуально просматривать миниатюры и названия ваших исторических работ.

Переключение работ

Нажмите на любую карточку работы в списке, чтобы немедленно загрузить её содержимое в редактор. Это позволяет быстро сравнивать и модифицировать различные дизайнерские черновики без возврата на главную страницу или в профиль.

4.4 Горячие клавиши холста

Освоение горячих клавиш может значительно повысить эффективность редактирования. Вот основные горячие клавиши, поддерживаемые в области холста:

Действие	Горячая клавиша
Масштабирование	Ctrl / Cmd + Колесо мыши
Панорамирование	Space + Перетаскивание мышью
Множественный выбор	Shift + Клик
Копировать	Ctrl / Cmd + C
Вставить	Ctrl / Cmd + V
Отменить	Ctrl / Cmd + Z
Удалить	Delete / Backspace

4.5 Правая панель - Вкладка «Редактирование»

Вкладка «Редактирование» — наиболее часто используемая область, предоставляющая переключатели режимов и богатые инструменты настройки стилей. После выбора элемента панель интеллектуально отображает параметры редактирования в зависимости от типа элемента.

Вкладка редактирования: переключатели режимов и инструменты стилей

Переключатели режимов

В верхней части панели предусмотрены четыре переключателя режимов для управления поведением взаимодействия редактора. Каждый переключатель можно включать или выключать независимо, с уведомлением о текущем состоянии.

Режим	Описание
Редактирование компонентов	При включении вы можете выбирать и настраивать интерактивные функциональные компоненты (такие как кнопки, поля формы и т.д.); при отключении можно редактировать только текстовое содержимое. Идеально для сценариев, требующих точной манипуляции элементами формы.
Навигация по ссылкам	При включении клик по связанным элементам в режиме редактирования переходит напрямую к целевому URL; при отключении навигация блокируется, чтобы вы могли редактировать сам элемент ссылки. Примечание: этот параметр не влияет на функциональность ссылок в предпросмотре или скачанных файлах.
Режим удаления	При включении вы можете удалять элементы простым кликом без использования контекстного меню; при отключении возобновляется обычный режим редактирования. Идеально для быстрой очистки нескольких элементов.
Декоративные слои	При включении вы можете идентифицировать и редактировать пустые контейнеры и декоративные элементы (такие как контейнеры границ, фоновые слои и т.д.); при отключении распознаются только элементы с фактическим содержимым. Для сложных макетов страниц включение этой функции позволяет более точно контролировать декоративные элементы.

Совет: Навигация по ссылкам отключена по умолчанию во время редактирования, чтобы разрешить редактирование компонентов. Для перехода по ссылкам включите переключатель «Навигация по ссылкам» в панели редактирования. Отправка форм также блокируется в режиме редактирования для защиты вашего контента.

Стиль текста

После выбора текстового элемента или входа в режим редактирования панель отображает комплексные инструменты стиля текста со следующими параметрами форматирования:

Стиль текста: настройки шрифта, размера, цвета

Функция	Описание
Шрифт	Выбор из системных шрифтов, английских шрифтов (Inter, Roboto, Open Sans и др.) и китайских шрифтов (SimSun, SimHei, Microsoft YaHei, Source Han Sans и др.).
Размер шрифта	Несколько предустановленных размеров от 12px до 72px или ввод пользовательского размера вручную.
Цвет шрифта / Цвет фона	Установка цвета текста и фоновой подсветки через палитру с поддержкой пипетки на холсте.
Жирный, Курсив, Подчёркивание, Зачёркивание	Переключение в один клик для эффектов жирного, курсива, подчёркивания и зачёркивания.
Выравнивание	Четыре варианта выравнивания текста — по левому краю, по центру, по правому краю и по ширине.
Высота строки, Межбуквенный интервал, Межабзацный интервал	Тонкая настройка высоты строки (от 1x до 3x), межбуквенного и межабзацного интервала для оптимизации типографики.
Верхний индекс, Нижний индекс	Форматирование выделенного текста как верхнего или нижнего индекса для математических формул, химических обозначений и т.д.
Маркированный список, Нумерованный список	Быстрое преобразование текста в неупорядоченный (маркированный) или упорядоченный (нумерованный) список.
Управление отступом	Увеличение или уменьшение отступа для настройки иерархии абзацев.

Стиль элемента

После выбора любого элемента используйте инструменты стиля элемента для настройки его внешнего вида:

Функция	Описание
Стиль границы	Установка типа границы (нет, сплошная, пунктирная, точечная), ширины (1px-10px) и цвета. Нажмите «Очистить границу» для быстрого удаления всех границ.
Радиус скругления	Настройка радиуса скругления всех четырёх углов для создания прямоугольников со скруглёнными углами или круговых эффектов.
Прозрачность	Использование ползунка для настройки прозрачности элемента (0%-100%) для эффектов прозрачности.
Тень	Четыре предустановки тени — без тени, лёгкая тень, средняя тень, глубокая тень — для быстрых эффектов глубины.
Позиция и размер	Точная установка координат X/Y элемента и значений ширины/высоты.
Сохранение пропорций	При включении настройка ширины автоматически масштабирует высоту пропорционально.

Стиль изображения

После выбора элемента изображения настройте параметры отображения и замените изображение:

Функция	Описание
Подгонка изображения	Четыре режима подгонки — contain (пропорциональное масштабирование), cover (заполнение), fill (растягивание), none (оригинальный размер).
Позиция	Использование позиционера с сеткой 9 для установки выравнивания изображения в контейнере (верх-лево, верх-центр, верх-право, центр-лево, центр, центр-право, низ-лево, низ-центр, низ-право).
Замена изображения	Загрузка нового локального изображения или ввод URL для замены. Локальная загрузка поддерживает JPG, PNG, GIF, WebP и другие распространённые форматы.

Стиль таблицы

При выборе таблицы или ячейки таблицы становятся доступны специализированные инструменты редактирования таблиц. Подробные инструкции см. в 4.10 Редактирование таблиц.

Стиль таблицы: операции со строками/столбцами, границы и настройки ячеек

Функция	Описание
Операции строк/столбцов	Вставка строк выше/ниже, столбцов слева/справа или удаление строк/столбцов.
Выравнивание ячейки	Установка горизонтального выравнивания (по левому краю, по центру, по правому краю) и вертикального выравнивания (по верху, по центру, по низу) для содержимого ячейки.
Стиль границы	Настройка ширины границы таблицы, стиля (сплошная, пунктирная и т.д.) и цвета.
Фон ячейки	Установка цвета фона ячейки — идеально для выделения заголовков или важных данных.
Объединение/Разделение	Выбор соседних ячеек для объединения в одну; объединённые ячейки можно разделить обратно.

Редактирование ссылок

Добавление ссылок для навигации по клику к любому элементу или редактирование существующих ссылок:

Функция	Описание
Вставить / Редактировать ссылку	Введите целевой URL для добавления навигации по клику к выбранному элементу. Поддерживаются http/https ссылки.
Удалить ссылку	Удаление ссылки с элемента, возвращение его к обычному элементу. Система запросит подтверждение количества ссылок для удаления перед выполнением.

Инструменты выравнивания (множественный выбор)

При выборе нескольких элементов панель отображает инструменты выравнивания и распределения для быстрой организации макетов элементов:

Функция	Описание
Выровнять по левому / правому / верхнему / нижнему краю	Выравнивание всех выбранных элементов по краю самого левого/правого/верхнего/нижнего элемента.
Центрировать по горизонтали / вертикали	Выравнивание центральных точек всех выбранных элементов по горизонтали или вертикали.
Распределить по горизонтали / вертикали	Распределение нескольких выбранных элементов с равным интервалом по горизонтали или вертикали.

4.6 Правая панель - Вкладка «Компоненты»

Вкладка «Компоненты» предоставляет параметры быстрой вставки для различных типов элементов, помогая быстро добавлять новый контент на холст. Нажмите кнопку, чтобы вставить соответствующий компонент.

Вкладка компонентов: вставка различных элементов в один клик

Компонент	Описание
Вставить текст	Вставка редактируемого текстового блока на холст. Дважды щёлкните после вставки, чтобы войти в режим редактирования и изменить содержимое.
Вставить кнопку	Вставка предварительно стилизованного элемента кнопки. Вы можете редактировать текст кнопки и добавить ссылку для клика.
Вставить изображение	Открывает диалог загрузки изображения с поддержкой локальной загрузки или ввода URL. Применяются ограничения размера одного файла и пакетной загрузки — подробности см. в интерфейсе загрузки.
Вставить иконку	Открывает выбор иконок с шестью категориями — Стрелки, Фигуры, Символы, Социальные сети, Декоративные и Общие. Установите цвет и размер иконки перед вставкой.
Вставить таблицу	Открывает селектор размера таблицы. Наведите, чтобы выбрать строки и столбцы (например, таблица 3×4), затем нажмите для вставки.
Вставить ссылку	Вставка текстового элемента со ссылкой на холст. Введите URL ссылки и отображаемый текст.
Вставить прямоугольник / круг	Вставка базовых элементов фигур. Используйте инструменты стиля элемента для настройки границы, цвета фона, радиуса и других свойств для декора или макета.

4.7 Правая панель - Вкладка «Слои»

Вкладка «Слои» предоставляет список всех редактируемых элементов на холсте, поддерживая фильтрацию, пакетные операции и точное позиционирование — мощный инструмент для управления сложными элементами страницы.

Вкладка слоёв: управление слоями и пакетные операции

Список карточек элементов

Панель отображает все управляемые элементы в виде карточек. Каждая карточка показывает тип тега элемента (например, DIV, IMG, SPAN) и уровень слоя, с предпросмотром содержимого для текстовых элементов. Декоративные элементы слоя отмечены меткой «Декоративный». Иконки быстрой блокировки/разблокировки и скрытия/отображения появляются справа от каждой карточки.

Параметры фильтрации

Нажмите кнопку фильтрации для фильтрации списка по состоянию элемента со следующими параметрами:

Фильтр	Описание
Все	Показать все управляемые элементы
Заблокированные	Показать только заблокированные элементы
Разблокированные	Показать только разблокированные элементы
Скрытые	Показать только скрытые элементы
Видимые	Показать только видимые элементы

Пакетные операции

После выбора нескольких элементов в списке карточек используйте кнопки пакетных операций для унифицированной обработки:

Операция	Описание
Выбрать все / Инвертировать выбор	Быстрый выбор всех элементов или инверсия текущего выбора
Заблокировать выбранные / Разблокировать выбранные	Пакетная блокировка или разблокировка выбранных элементов; заблокированные элементы нельзя редактировать или перемещать
Скрыть выбранные / Показать выбранные	Пакетное скрытие или отображение выбранных элементов; скрытые элементы невидимы на холсте, но остаются в HTML
Удалить выбранные	Пакетное удаление выбранных элементов с запросом подтверждения

Переключатель точности

Вкладка «Слои» предоставляет переключатель точности для управления точностью распознавания элементов:

Состояние	Описание
Точность вкл.	Автоматическая дедупликация, отображение только хост-элементов для уменьшения дубликатов карточек
Точность выкл.	Показывать все элементы-кандидаты (включая встроенные фрагменты), идеально для точных операций со встроенными элементами

Клик по карточке для локализации

Нажмите на любую карточку элемента, чтобы автоматически прокрутить холст и подсветить соответствующий элемент, упрощая быстрый поиск конкретных компонентов на странице. Это особенно полезно при работе со сложными или многослойными макетами страниц.

4.8 Правая панель - Вкладка «Библиотека»

Вкладка «Библиотека» — это ваша личная библиотека компонентов, где вы можете сохранять часто используемые элементы или компоненты для повторного использования в разных работах, повышая эффективность творчества.

Вкладка библиотеки: личная библиотека компонентов

Список избранных компонентов

Панель отображает все сохранённые компоненты в виде карточек, каждая показывает миниатюру и название. Миниатюры автоматически генерируются при сохранении; компоненты без названия отображаются как «Без названия».

Поиск в избранном

Используйте поле поиска для быстрого нахождения сохранённых компонентов по названию. Список фильтруется в реальном времени по мере ввода.

Вставка избранного компонента

Нажмите кнопку «Вставить» на карточке библиотеки, чтобы добавить этот компонент на текущий холст. Вставленные компоненты можно редактировать и настраивать как обычно.

Переименование / Удаление избранного

Каждая карточка библиотеки предлагает опции «Переименовать» и «Удалить». Переименование упрощает поиск компонентов в будущем; удаление навсегда удаляет сохранённый компонент — используйте с осторожностью.

Как добавить в библиотеку

Выберите любой элемент на холсте, затем выберите «Добавить в библиотеку» из контекстного меню, чтобы сохранить этот элемент и его дочерние элементы как компонент. При успехе появляется подтверждение «Добавлено в библиотеку».

4.9 Контекстное меню

Правый клик на выбранном элементе открывает контекстное меню, предоставляющее быстрый доступ к общим действиям. Содержимое меню динамически настраивается в зависимости от типа выбранного элемента.

Контекстное меню: быстрый доступ к общим действиям

Пункт меню	Описание
Копировать / Вставить	Копирование выбранного элемента в буфер обмена или вставка содержимого буфера на холст. Поддерживается копирование и вставка между работами.
Добавить в библиотеку	Сохранение выбранного элемента в личную библиотеку для повторного использования в других работах.
Добавить/Редактировать/Удалить ссылку	Добавление ссылки для навигации по клику к элементу или редактирование/удаление существующих ссылок. Удаление запрашивает подтверждение.
Заменить изображение	Показывается только для элементов изображений; быстрая замена локальной загрузкой или изображением по URL.
Переместить выше / Переместить ниже	Настройка позиции элемента в порядке наложения; перемещение выше выводит его вперёд.
На передний план / На задний план	Перемещение элемента напрямую на передний или задний план относительно всех элементов.
Заблокировать / Разблокировать	Заблокированные элементы нельзя редактировать или перемещать, предотвращая случайные изменения. Разблокировка восстанавливает возможность редактирования.
Скрыть / Показать	Временное скрытие элемента с холста при сохранении его в HTML. Показать восстанавливает видимость.
Удалить	Постоянное удаление выбранного элемента. При выборе нескольких элементов показывается их количество.

Меню для таблиц

При правом клике на ячейке таблицы меню показывает дополнительные операции, специфичные для таблиц:

Пункт меню	Описание
Удалить строку	Удаление всей строки, содержащей текущую ячейку (нельзя удалить последнюю строку)
Удалить столбец	Удаление всего столбца, содержащего текущую ячейку (нельзя удалить последний столбец)

4.10 Редактирование таблиц

При выборе таблицы или ячейки таблицы правая панель отображает специализированные инструменты редактирования таблиц с комплексными функциями настройки стиля и структуры таблицы.

Редактирование таблиц: операции со строками/столбцами и настройки стиля

Операции со строками и столбцами

Раздел «Строки и столбцы» панели редактора таблиц предоставляет:

Операция	Описание
Вставить строку выше / ниже	Вставка новой строки выше или ниже текущей строки
Удалить строку	Удаление текущей выбранной строки (нельзя удалить последнюю строку)
Вставить столбец слева / справа	Вставка нового столбца слева или справа от текущего столбца
Удалить столбец	Удаление текущего выбранного столбца (нельзя удалить последний столбец)

Объединение / Разделение ячеек

После выбора нескольких соседних ячеек используйте «Объединить ячейки» для объединения их в одну. Для объединённых ячеек используйте «Разделить ячейку» для восстановления исходных нескольких ячеек.

Выравнивание ячейки

Установите выравнивание содержимого ячейки в двух измерениях:

Измерение	Варианты
Горизонтальное	По левому краю, По центру, По правому краю
Вертикальное	По верху, По середине, По низу

Стиль границы

Настройте внешний вид границы таблицы, включая:

Свойство	Описание
Ширина границы	Установка толщины границы
Стиль границы	Сплошная, Пунктирная, Точечная, Двойная, Без границы
Цвет границы	Выбор цвета границы через палитру

Нажмите «Применить» для сохранения изменений.

Фон ячейки

Установите цвет фона ячейки с помощью палитры — идеально для выделения заголовков или важных строк данных.

4.11 Управление масштабом и область просмотра

Контроллер масштаба в нижней части холста обеспечивает регулировку масштаба и размера области просмотра, помогая предварительно просматривать вашу работу на устройствах разных размеров.

Управление масштабом: настройка масштаба холста и размера области просмотра

Увеличить / Уменьшить / Сбросить

Используйте кнопки «+» и «−» для увеличения или уменьшения масштаба холста, или удерживайте Ctrl/Cmd + колесо мыши для быстрого масштабирования. Нажмите на процентное значение для сброса к масштабу по умолчанию. Удерживайте пробел + перетаскивание для панорамирования холста.

Предустановки размера области просмотра

Нажмите на селектор области просмотра для переключения между размерами предпросмотра, имитируя отображение на разных устройствах:

Размер области просмотра	Описание
Авто	Соответствие размеру содержимого, подходит для большинства сценариев
Рабочий стол 1920×1080 (По умолчанию)	Монитор Full HD
Рабочий стол 1440×900	Распространённый экран ноутбука
Рабочий стол 1366×768	Популярное разрешение ноутбука
Рабочий стол 1280×720	Разрешение HD
Планшет 1024×768	Стандартное планшетное устройство
Мобильный 375×812	iPhone и аналогичные мобильные устройства

Патчи предпросмотра

Для HTML-страниц с особой структурой доступны три патча предпросмотра для оптимизации отображения. Включение или отключение патчей автоматически сохранит и обновит предпросмотр:

Патч	Описание
USP — стабилизация сверхвысоких страниц	Оптимизирует сверхвысокие или безграничные холсты, уменьшая дрожание. Подходит для сложных/безграничных статических файлов
UFP — фиксация ширины области просмотра	Ограничивает ширину области просмотра, восстанавливая правильное отображение сложных макетов
SHP — оптимизация нестандартных размеров	Оптимизирует HTML с нестандартной структурой для улучшения совместимости

Совет: Если патчи не показывают заметного эффекта, сначала попробуйте «Восстановить исходный HTML», затем повторно включите патч.

4.12 HTML-редактор

HTML-редактор позволяет напрямую просматривать и редактировать полный исходный код HTML вашей работы — идеально для продвинутых пользователей, которым нужна тонкая настройка или добавление пользовательского кода. Эта функция доступна только в Proе.

HTML-редактор: редактирование исходного кода напрямую (Pro)

Просмотр / Редактирование полного HTML

При открытии HTML-редактора отображается полный исходный код HTML (включая <!DOCTYPE html>). Вы можете редактировать код напрямую; сохранение применяет ваши изменения.

Поиск и замена

Используйте Ctrl+F для открытия поиска, вводя ключевые слова для быстрого нахождения кода. Используйте Ctrl+H для открытия замены для пакетной замены текста. Панель инструментов показывает количество совпадений (например, «3 / 15») с опциями индивидуальной или полной замены.

Переход к строке

Используйте Ctrl+G или функцию перехода на панели инструментов для ввода номера строки и быстрого перехода к этой строке — полезно для больших HTML-файлов.

Учёт регистра

Включите опцию «Учитывать регистр» во время поиска для точного соответствия содержимому с учётом регистра.

Перенос слов

При включённом переносе слов длинные строки кода автоматически переносятся для просмотра без горизонтальной прокрутки.

Копирование / Сохранение

Нажмите «Копировать HTML» для копирования полного исходного кода в буфер обмена. После редактирования нажмите Сохранить для применения изменений. При пустом содержимом или синтаксических ошибках появятся соответствующие сообщения.

Примечание: Если содержимое HTML превышает лимиты хранения, при сохранении появится «Недостаточно места, невозможно сохранить эту правку». Удалите ненужное содержимое или обновите тариф для увеличения ёмкости.

4.13 Нижняя панель инструментов

Нижняя панель инструментов предоставляет основные кнопки действий редактора, включая предпросмотр, отмену/повтор, восстановление и функции сохранения.

Нижняя панель инструментов: предпросмотр, сохранение и восстановление

Предпросмотр (открывается в новом окне)

Нажмите кнопку предпросмотра, чтобы открыть полный предпросмотр вашей работы в новом окне, показывая фактический результат отображения. На странице предпросмотра отображается уведомление о временном предпросмотре, напоминающее пользователям, что это предпросмотр на этапе редактирования с неповторно используемой ссылкой.

Отменить / Повторить

Отмена откатывает последнюю операцию; Повтор восстанавливает отменённую операцию. Поддерживается несколько шагов отмены/повтора. Также доступно через Ctrl+Z (отмена) и Ctrl+Y (повтор).

Обновить предпросмотр

Нажатие обновить перезагружает область предпросмотра. Система сначала сохраняет текущее содержимое, затем обновляет холст для отображения последнего состояния. Полезно после обширного редактирования для синхронизации отображения.

Восстановить последнее сохранённое состояние

Восстанавливает работу до последнего вручную сохранённого состояния. Все несохранённые правки будут потеряны — используйте с осторожностью. Система запрашивает подтверждение перед выполнением.

Восстановить исходный HTML

Восстанавливает HTML работы до исходного состояния при первом создании. Вся история редактирования будет очищена. Это действие необратимо — убедитесь, что вы сделали резервную копию важного содержимого.

Сохранить

Вручную сохраняет все текущие изменения. Система также поддерживает автосохранение, но рекомендуется ручное сохранение после важных правок для обеспечения безопасности данных. «Успешно сохранено» появляется по завершении.

4.14 Верхняя панель инструментов

Верхняя панель инструментов отображает информацию о работе и кнопки быстрых действий, обеспечивая быстрый доступ к функциям публикации и скачивания.

Верхняя панель инструментов: название, публикация и скачивание

Название работы (двойной клик для редактирования)

Вверху отображается текущее название работы; дважды щёлкните область названия, чтобы войти в режим редактирования и изменить имя. Название не может быть пустым; «Название успешно обновлено» появляется при успехе. Работы без названия отображаются как «Работа без названия».

Кнопка публикации

Нажмите кнопку публикации, чтобы включить публикацию работы и сгенерировать доступную ссылку. Подробности см. в 4.16 Функция публикации. Эта функция доступна только в Proе.

Кнопки скачивания

Справа предоставлены кнопки «Скачать как изображение» и «Скачать как HTML». Подробности см. в 4.15 Скачивание работы.

4.15 Скачивание работы

HtmlDrag предлагает гибкие варианты экспорта, позволяя скачивать вашу работу как изображение или стандартный HTML-файл для публикации, архивации или дальнейшей разработки.

Нажмите кнопку «Скачать как изображение» на верхней панели, чтобы сгенерировать и скачать высококачественное PNG-изображение всего содержимого холста. Это идеально подходит для демонстрации дизайна, публикации в социальных сетях или предпросмотра.

Скачать как HTML

Пользователи Proа могут экспортировать работы как стандартные HTML-файлы исходного кода. Нажатие кнопки «Скачать как HTML» предлагает два варианта:

• Скачать текущий HTML: Включает все модификации и настройки, которые вы сделали в редакторе — что видите, то и получаете.
• Скачать оригинальный HTML: Экспортирует исходный код с момента первого создания работы, без последующих правок.

Варианты скачивания: выбор между текущей отредактированной версией или оригинальной версией

4.16 Функция публикации

Функция публикации позволяет генерировать общедоступную ссылку на вашу работу, упрощая публикацию творений. Страница публикации также предоставляет статистику доступа. Эта функция доступна только в Proе.

Настройки публикации: управление ссылкой и статусом

Настройки и управление

• Включить публикацию: Нажмите кнопку публикации для генерации уникальной ссылки. При первом включении появляется «Публикация включена, ссылка скопирована в буфер обмена».
• Срок действия: Ссылки публикации действительны 7 дней по умолчанию. Вы можете просмотреть конкретное время истечения в диалоге публикации.
• Обновить время: Если срок ссылки истекает или вы хотите его продлить, нажмите «Обновить ссылку» для сброса периода действия.
• Остановить публикацию: Нажмите «Остановить публикацию» для немедленной деактивации текущей ссылки, предотвращая дальнейший доступ.
• Копировать ссылку: Нажмите кнопку копирования для копирования ссылки публикации в буфер обмена.

Страница публикации и статистика

Посетители, открывающие ссылку публикации, увидят отдельную страницу презентации. Правая боковая панель отображает информацию о работе, включая:

• Название и автор: Показывает ваш никнейм и название работы.
• Статистика: Просмотр просмотров и лайков для отслеживания популярности.
• Срок истечения: Отображает, когда истечёт срок ссылки публикации.

Страница публикации: вид посетителя и статистика

Примечание: Если работа была заявлена и подтверждена нарушение политики, система может отключить публикацию для этой работы с сообщением «Эта работа была заявлена и подтверждена, публикация отключена системой».

5. Другие функции

Помимо основных функций редактирования, HtmlDrag также предоставляет функции сообщений и обратной связи, чтобы помочь вам оставаться в курсе событий и общаться с нами.

5.1 Сообщения

Модуль сообщений получает важные системные уведомления, включая статус аккаунта, напоминания об оплате, оповещения об истечении членства и обновления функций.

Сообщения: получение системных уведомлений и оповещений

Список системных сообщений

Список сообщений отсортирован хронологически, показывая название, краткое содержание, время создания и время истечения. Нажмите на сообщение для просмотра подробностей или выполнения действий (например, «Продолжить оплату», «Продлить сейчас»).

Фильтр непрочитанных

Установите флажок «Только непрочитанные» в правом верхнем углу для быстрой фильтрации непрочитанных сообщений, помогая сосредоточиться на важных уведомлениях.

Отметить все как прочитанные

Нажмите кнопку «Отметить все как прочитанные» для мгновенной отметки всех сообщений в текущем списке как прочитанных, очистив индикаторы красных точек.

Подробности сообщения

Нажмите на карточку сообщения для просмотра полного содержимого уведомления. Для сообщений о заказах или членстве подробности часто включают кнопки быстрых действий для вашего удобства.

5.2 Обратная связь

Если вы столкнулись с проблемами или имеете предложения, отправьте их через модуль обратной связи. Вы можете загружать изображения для лучшего описания вашей проблемы.

Обратная связь: отправка проблем или предложений

Список обратной связи и статус

Список показывает историю ваших отправлений и текущий статус:

• В обработке: Обратная связь отправлена, ожидает рассмотрения администратором.
• Отвечено: Администратор ответил; нажмите для просмотра.
• Закрыто: Обратная связь архивирована или решена; дальнейшие ответы не принимаются.

Отправить новую обратную связь

Нажмите «Новая обратная связь», введите ваше содержимое (обязательно, минимум 10 символов). Вы можете «Загрузить изображения» (максимум 2МБ каждое) для предоставления скриншотов. Нажмите «Отправить обратную связь» по завершении.

Подробности обратной связи и переписка

Нажмите на элемент списка для просмотра полной истории переписки, включая ваши сообщения и ответы администратора. Вверху показан ID обратной связи и вложения.

Продолжить ответ

Для обратной связи «В обработке» или «Отвечено» используйте поле ввода внизу для предоставления дополнительной информации или ответа администратору до решения.

6. Системные подсказки

Во время использования вы можете столкнуться с системными оповещениями или ограничениями. Вот объяснения и рекомендации для распространённых системных подсказок.

6.1 Оповещения об обнаружении HTML

Для обеспечения качества импорта и стабильности редактора система автоматически сканирует URL-адреса и файлы, предупреждая вас о потенциальных проблемах.

Обнаружение локальных ресурсов

Если страница содержит локальные пути (например, file:// или C:/), ресурсы не будут загружаться. Рекомендация: Убедитесь, что все ресурсы используют публичные HTTP/HTTPS ссылки.

Защита от хотлинкинга изображений

Некоторые сайты блокируют внешний доступ к изображениям. Рекомендация: Используйте «Заменить изображение» для загрузки локальных файлов или размещения их на публичном сервисе.

Страницы с динамическим рендерингом (SPA)

Страницы, полностью полагающиеся на JavaScript (SPA), могут импортироваться пустыми или неполными, потому что динамический DOM не захватывается напрямую. Рекомендация: Используйте «Вставить код», скопировав отрендеренный HTML из вашего браузера.

Внешние шрифты / Библиотеки иконок

Шрифты или иконки с отсутствующими заголовками CORS могут отображаться некорректно. Рекомендация: Замените их системными шрифтами или иконками библиотеки в редакторе.

Встроенный контент (iframe)

В целях безопасности некоторый контент iframe может быть заблокирован или неинтерактивен. Система сохраняет заполнители где это возможно.

6.2 Хранилище и лимиты

HtmlDrag применяет квоты ресурсов в зависимости от вашего тарифа. Вы можете увидеть оповещения «Достигнут лимит хранилища» или «Достигнут лимит работ».

Достигнут лимит хранилища

Вы не можете сохранять правки или загружать файлы при отсутствии свободного места. Решение:

• Удалите старые элементы в «Портфолио» для освобождения места.
• Нажмите «Обновить сейчас» в диалоге для получения большей ёмкости с Proом.

Лимит количества работ

Пользователи бесплатного плана имеют ограничение на количество сохранённых работ. Удалите старые работы или обновитесь для увеличения этого лимита.

Лимиты загрузки изображений

Система проверяет размер одного файла и пакетные лимиты. Если вы видите «Размер файла превышает лимит» или «Превышен размер пакета», сожмите изображения или загружайте меньшими партиями. Пользователи Proа имеют более высокие лимиты.

6.3 Сканирование безопасности

Встроенное сканирование безопасности автоматически оценивает риск контента при импорте URL-адресов, загрузке файлов или вставке кода для защиты вашего аккаунта.

Уровень риска

На основе угроз, таких как XSS, вредоносные скрипты или опасные теги, риски классифицируются как:

• Низкий риск: Незначительные предупреждения; обычно безопасно продолжать.
• Средний риск: Потенциальные проблемы; продолжайте с осторожностью.
• Высокий риск: Серьёзные риски; продолжайте только если источник доверенный.
• Критический риск: Содержит вредоносное ПО или фишинговый контент; немедленно блокируется.

Безопасный режим

Для файлов с некоторым риском система предлагает «Меры безопасности» такие как Автоочистка. Вы можете выбрать «Продолжить в безопасном режиме», где система удаляет опасный код, сохраняя макет и возможность редактирования.