Веб-приложение для быстрой генерации HTML-страниц новостей из подготовленного шаблона. Ускоряет процесс публикации контента, автоматизируя подстановку данных в нужные места кода.
Определяет и заменяет значения для следующих плейсхолдеров:
{{TITLE}}
{{H2_TITLE}}
{{DESCRIPTION}}
{{NEWS_DATE}}
{{IMAGE_SRC}}
{{FIRST_PARAGRAPH}}
{{NEWS_CONTENT}}
- Работа с шаблоном: Позволяет вставить любой HTML-код в качестве шаблона и работать с ним.
- Динамическая подстановка: Автоматически заменяет плейсхолдеры на данные из полей ввода.
- Автоформатирование: Первая строка текста новости становится тегом
<h3>, остальные —<p>. - Заполнение мета-тегов: Обновляет
<title>,og:titleи мета-теги описания для SEO. - Обновление страницы /news: Добавляет новую новость в начало списка на странице
/news. - Обновление главной страницы: Добавляет новую карточку новости в начало списка на главной странице.
- Сохранение структуры HTML: Полностью сохраняет структуру шаблонов, включая DOCTYPE,
<html>,<head>и<body>. - Сброс полей: После скачивания файла поля ввода данных новости автоматически очищаются для подготовки следующей новости (шаблоны остаются заполненными).
- Откройте news_generator.html в браузере.
- Получите актуальный код страницы /news:
- Откройте страницу
/newsв браузере. - Нажмите
Ctrl+U, чтобы открыть исходный код страницы. - Скопируйте весь код и вставьте его в поле "Код страницы /news".
- Откройте страницу
- Получите актуальный код главной страницы:
- Откройте главную страницу в браузере.
- Нажмите
Ctrl+U, чтобы открыть исходный код страницы. - Скопируйте весь код и вставьте его в поле "Код главной страницы".
- Заполните остальные поля:
- Заголовок: Укажите заголовок новости. Он используется для генерации ссылки и URL изображения.
- Ссылка: Генерируется автоматически из заголовка, но при необходимости может быть изменена вручную.
- URL изображения: Генерируется автоматически из заголовка, но при необходимости может быть изменена вручную.
- Дата: По умолчанию выставляется сегодняшняя дата, но вы можете изменить её при необходимости.
- Текст новости: Первый абзац используется в качестве превью новости для карточек на главной странице и странице
/news.
- Нажмите кнопку "Сгенерировать и скачать HTML".
- Автоматически скачаются 3 обновлённых файла:
- Файл страницы новости.
- Обновленный файл страницы
/news. - Обновленный файл главной страницы.
- HTML
- Tailwind CSS
- JavaScript (ванильный)
Веб-калькулятор для быстрого расчета адаптивной высоты (height) блоков на бэкапе Tilda. Ускоряет верстку макетов, автоматизируя вычисления для разных разрешений экрана.
Определяет значения таких параметров как:
data-artboard-height
data-artboard-height-res-320
data-artboard-height-res-480
data-artboard-height-res-640
data-artboard-height-res-960
- Расчет по 5 разрешениям: Автоматически вычисляет высоту для экранов 1200, 960, 680, 480 и 320px.
- Обновление в реальном времени: Результаты рассчитываются мгновенно по мере ввода.
- Копирование кликом: Нажмите на результат, чтобы скопировать его в буфер обмена.
- Округление вверх: Значения округляются до ближайшего целого в большую сторону (
Math.ceil) для удобства использования в CSS.
- Откройте pixel_calculator.html в браузере.
- Введите необходимое значение высоты в пикселях найденное через DevTools.
- Результаты значений для JS Tilda рассчитаются автоматически.
- Кликните по нужной строке, чтобы скопировать значение.
- HTML
- Tailwind CSS
- JavaScript (ванильный)
Веб-приложение для быстрой генерации HTML-кода вакансий в формате "аккордеон" для сайтов на Tilda. Ускоряет процесс добавления новых вакансий, автоматизируя создание уникальных ID и подстановку контента.
- Генерация уникальных ID: Автоматически создает два уникальных 10-значных ID для каждого блока вакансии (заголовок и тело), подставляя их во все необходимые атрибуты и стили.
- Динамическая подстановка контента: Легко заполняет шаблоны названием и полным HTML-описанием вакансии.
- Настройка аккордеона: Позволяет указать общее количество вакансий для корректной генерации класса
uc-accord-a-X. - Сохранение форматирования: Генерирует итоговый HTML-код с сохранением всех оригинальных отступов и переносов строк для удобства вставки.
- Копирование в один клик: Позволяет скопировать весь готовый HTML-код одним нажатием кнопки.
- Откройте vacancy_generator.html в браузере.
- Укажите общее количество вакансий, которое будет на странице.
- Введите название новой вакансии.
- Вставьте HTML-код с описанием в соответствующее поле.
- Нажмите кнопку «Сгенерировать».
- Скопируйте готовый код из поля результата.
- HTML
- CSS (встроенный)
- JavaScript (ванильный)