{% extends 'typograph/base.html' %}
{% load static %}

{% block title %}Онлайн-типограф для текста и HTML — ETPGRF: кавычки «ёлочки», тире, неразрывные пробелы{% endblock %}

{% block og_title %}Онлайн-типограф для текста и HTML — ETPGRF{% endblock %}

{% block og_description %}Бесплатный умный онлайн-типограф для подготовки текстов, статей и верстки к публикации в вебе за один клик.{% endblock %}

{% block content %}
  <div class="row">
    <div class="col-md-12">

      {# SEO-текст и описание #}
      <div class="mb-4">
        <h1 class="h3 mb-3">Онлайн-типограф для текста и веб-публикаций</h1>
        <p>
          Интернет-типограф <strong>etpgrf</strong>&nbsp;— инструмент для&nbsp;подготовки текста для&nbsp;публикации
          в&nbsp;вебе. Расстановка неразрывных пробелов перед&nbsp;союзами и&nbsp;предлогами, замена кавычек
          на&nbsp;«ёлочки» (или&nbsp;“лапки” для&nbsp;англоя&shy;зычного текста), отбивка и&nbsp;компоновка тире,
          инициалов, единиц измерения, переносы в&nbsp;словах, обработка псевдо&shy;графики и&nbsp;преобра&shy;зование
          их&nbsp;в&nbsp;спецсимволы, висячая пунктуация. Получите готовый и&nbsp;валидный HTML-код для&nbsp;вставки
          на&nbsp;ваш сайт или публикацию в&nbsp;блог.
        </p>
        <p class="text-muted small">
          Исходный код etpgrf-типографа доступен в&nbsp;нескольких репози&shy;ториях
          (<a href="https://github.com/erjemin/etpgrf" target="_blank">GitHub</a>,
          <a href="https://gitverse.ru/erjemin/etpgrf" target="_blank">GitVerse</a>,
          <a href="https://git.cube2.ru/erjemin/2025-etpgrf" target="_blank">Сube2</a>, и&nbsp;<a
          href="https://pypi.org/project/etpgrf/" target="_blank">PyPI</a>), распрос&shy;траняется под&nbsp;лицензией
          <a href="https://opensource.org/licenses/MIT" target="_blank">MIT</a>, может быть установлен
          локально, на&nbsp;ваш сайт или&nbsp;интегри&shy;рован в&nbsp;ваши проекты как&nbsp;Python-библиотека.
        </p>
      </div>

      <form hx-post="{% url 'process_text' %}" hx-target="#result-area" hx-swap="innerHTML">
        {% csrf_token %}

        {# ГЛАВНОЕ ПОЛЕ ВВОДА #}
        <div class="mb-3">
          <div class="d-flex justify-content-between align-items-end mb-2">
            <label class="form-label fw-bold small text-muted ls-1 mb-0">
              <i class="bi bi-file-text me-1"></i> Исходный текст:
            </label>
            <div class="d-flex align-items-center">
                <span id="char-count" class="small text-muted me-3 nowrap">0 симв.</span>
                <button type="button" id="btn-clear" class="btn btn-sm btn-outline-secondary" title="Очистить поле">
                  <i class="bi bi-trash me-1"></i> Очистить
                </button>
            </div>
          </div>
          <textarea class="form-control" name="text" id="source-text" rows="10" placeholder="Вставьте текст сюда..."></textarea>
        </div>

        {# Блок настроек (Collapse) #}
        <div class="mb-3">
          <button class="btn btn-outline-secondary btn-sm mb-2" type="button" data-bs-toggle="collapse"
                  data-bs-target="#settingsCollapse" aria-expanded="false" aria-controls="settingsCollapse">
            <i class="bi bi-gear-fill me-1"></i> Настройки типографа
          </button>

          <div class="collapse" id="settingsCollapse">
            <div class="card card-body bg-body-tertiary ">
              <div class="row">
                {# КОЛОНКА 1 #}
                <div class="col-md-4">
                  {# Выбор языка (Alpine.js) #}
                  <div class="mb-3"
                       x-data="{ desc: 'Только русская типографика: кавычки «ёлочки» („вложенные“); длинное тире (—) с&nbsp;пробелами; «прили&shy;пающие» союзы и&nbsp;предлоги только для&nbsp;русского языка, переносы слов и&nbsp;т.&thinsp;д.' }">
                    <div class="d-flex align-items-center mb-1">
                      {# Иконка вместо чекбокса #}
                      <div class="me-2 text-center" style="width: 1.25em;">
                        <i class="bi bi-globe"></i>
                      </div>
                      <label class="form-check-label fw-bold me-2">Язык</label>
                      <select class="form-select form-select-sm w-auto" name="langs"
                              @change="desc = $event.target.options[$event.target.selectedIndex].dataset.desc">
                        <option value="ru" selected
                                data-desc="Только русская типографика: кавычки «ёлочки» („вложенные“); длинное тире (—) с&nbsp;пробелами; «прили&shy;пающие» союзы и&nbsp;предлоги только для&nbsp;русского языка, переносы слов и&nbsp;т.&thinsp;д.">
                          Русский
                        </option>
                        <option value="en"
                                data-desc="Только английская типографика: кавычки “лапки” (‘вложенные’); длинное тире (—) вплотную; «прили&shy;пающие» союзы и&nbsp;предлоги только для&nbsp;англий&shy;ского языка, переносы слов и&nbsp;т.&thinsp;д.">
                          Английский
                        </option>
                        <option value="ru+en"
                                data-desc="Основной русский <small>(кавычки и&nbsp;тире)</small> + поддержка англий&shy;ского языка для&nbsp;других правил типографики.">
                          Русский + Английский
                        </option>
                        <option value="en+ru"
                                data-desc="Основной английский <small>(кавычки и&nbsp;тире)</small> + поддержка русского  языка для&nbsp;других правил типографики.">
                          Английский +
                          Русский
                        </option>
                      </select>
                    </div>
                    {# Описание с отступом, чтобы было под текстом #}<div class="ms-4 ps-1 form-text text-muted small" style="min-height: 2.5em;" x-html="desc"></div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Кавычки" #}
                  <div x-data="{ enabled: true }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="quotes" id="optQuotes" checked
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optQuotes">Обработка кавычек</label>
                    </div>
                    {# Описание (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Прямые кавычки (&quot;) не&nbsp;будут заменяться на&nbsp;типогра&shy;фские («…ёлочки…» или&nbsp;“…лапки…”).
                    </div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Компоновка и отбивка" (Layout)  #}
                  <div x-data="{ enabled: true }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="layout" id="optLayout" checked
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optLayout">Компоновка и&nbsp;отбивка</label>
                    </div>
                    {# Настройки группы "Компоновка и отбивка" (видны, когда включено) #}
                    <div class="ms-3" x-show="enabled" x-transition>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="layout_initials" id="optLayoutInitials"
                               checked>
                        <label class="form-check-label" for="optLayoutInitials">Инициалы <small class="text-muted">(А.&thinsp;С.&thinsp;Пушкин)</small></label>
                      </div>
                      {# Единицы измерения с кастомным полем #}
                      <div x-data="{ unitsEnabled: true }" class="form-check">
                        <input class="form-check-input" type="checkbox" name="layout_units" id="optLayoutUnits" checked
                               x-model="unitsEnabled">
                        <label class="form-check-label" for="optLayoutUnits">Единицы измерения <small
                          class="text-muted">(10&thinsp;км)</small></label>
                        {# Поле для кастомных единиц #}
                        <div class="mt-1" x-show="unitsEnabled" x-transition>
                          <input type="text" class="form-control form-control-sm" name="layout_units_custom"
                                 placeholder="Доп. единицы (через пробел): бит байт">
                        </div>
                      </div>
                    </div>
                    {# Описание группа "Компоновка и отбивка" (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Если отключено, то&nbsp;отбивка тире, инициалов, устойчивых сокращений, единиц измерения не&nbsp;будет произведена.
                    </div>
                  </div>
                </div>
                {# КОЛОНКА 2 #}
                <div class="col-md-4">
                  {# Группа "Неразрывные пробелы" #}
                  <div x-data="{ enabled: true }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="unbreakables" id="optUnbreakables" checked
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optUnbreakables">Неразрывные пробелы</label>
                    </div>
                    {# Описание группы "Неразрывные пробелы" (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Если отключено, то&nbsp;предлоги, союзы и&nbsp;артикли могут оставаться в&nbsp;конце строки, частицы (<em>бы,&nbsp;же…</em>) могут отрываться от&nbsp;слов.
                    </div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Переносы" #}
                  <div x-data="{ enabled: true }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="hyphenation" id="optHyphenation" checked
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optHyphenation">Переносы внутри длинных слов</label>
                    </div>
                    {# Настройки переносов #}
                    <div class="ms-3 mt-1" x-show="enabled" x-transition>
                      <label class="form-label small text-muted mb-0">Макси&shy;мальная длина слова без&nbsp;переноса:</label>
                      <select class="form-select form-select-sm" name="hyphenation_len">
                        <option value="8">8 символов</option>
                        <option value="10">10 символов</option>
                        <option value="12" selected>12 символов</option>
                        <option value="14">14 символов</option>
                        <option value="16">16 символов</option>
                      </select>
                    </div>
                    {# Описание (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Если отключено, мягкие переносы (<tt>&amp;shy;</tt>) не&nbsp;будут расста&shy;вляться.
                    </div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Обработка псевдографики" #}
                  <div x-data="{ enabled: true }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="symbols" id="optSymbols" checked
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optSymbols">Обработка псевдо&shy;графики ((c) &rarr; ©)</label>
                    </div>
                    {# Описание (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Замена псевдо&shy;графики (стрелочки, копирайты) и&nbsp;обработка числовых диапазонов (10–20 → 10–20) отключена.
                    </div>
                  </div>
                </div>
                {# КОЛОНКА 3 #}
                <div class="col-md-4">
                  {# Группа "Висячая пунктуация" #}
                  <div x-data="{ enabled: false }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="hanging_enabled" id="optHanging"
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optHanging">Висячая пунктуация</label>
                    </div>
                    {# Настройки группы "Висячая пунктуация" (видны, когда включено) #}
                    <div class="ms-3 mt-1" x-show="enabled" x-transition>
                      <select class="form-select form-select-sm" name="hanging_punctuation">
                        <option value="left" selected>Только слева</option>
                        <option value="right">Только справа</option>
                        <option value="both">С обеих сторон</option>
                      </select>
                    </div>
                    {# Описание (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Кавычки, скобки, точки и&nbsp;запятые не&nbsp;будут выноситься за&nbsp;границы текстового блока.<br />
                      <b class="small">Не&nbsp;злоупо&shy;требляйте висячей пунктуацией. Она оправдана и&nbsp;наиболее эффектно выглядит только в&nbsp;заголовках, тизерах, выносах и&nbsp;врезках (например, для&nbsp;цитат).</b>
                    </div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Санитайзер" #}
                  <div x-data="{ enabled: false }" class="mb-2">
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" name="sanitizer_enabled" id="optSanitizer"
                             x-model="enabled">
                      <label class="form-check-label fw-bold" for="optSanitizer">Очистка от&nbsp;HTML (Sanitizer)</label>
                    </div>
                    {# Настройки группы "Санитайзер" (видны, когда включено) #}
                    <div class="ms-3 mt-1" x-show="enabled" x-transition>
                      <select class="form-select form-select-sm" name="sanitizer">
                        <option value="etp" selected>Очистить разметку висячей пунктуации</option>
                        <option value="html">Очистить все HTML-теги</option>
                      </select>
                    </div>
                    {# Описание группы "Санитайзер" (видно, когда выключено) #}
                    <div class="ms-3 form-text text-muted small" x-show="!enabled" x-transition>
                      Текст будет обработан «как&nbsp;есть», без&nbsp;предва&shy;рительной очистки от&nbsp;HTML-тегов или&nbsp;старой разметки.
                    </div>
                  </div>
                  {# ========== #}
                  <hr class="my-2"/>
                  {# Группа "Режим вывода" #}
                  <div
                    x-data="{ desc: 'Оптимально. Спецсимволы (—, ©) как&nbsp;есть, неразрывные пробелы как&nbsp;<tt>&amp;amp;nbsp;.</tt>' }">
                    <div class="d-flex align-items-center mb-1">
                      <div class="me-2 text-center" style="width: 1.25em;">
                        <i class="bi bi-code-slash"></i>
                      </div>
                      <label class="form-check-label fw-bold me-2">Режим вывода</label>
                      <select class="form-select form-select-sm w-auto" name="mode"
                              @change="desc = $event.target.options[$event.target.selectedIndex].dataset.desc">
                        <option value="mixed" selected
                                data-desc="Оптимально. Спецсимволы (—, ©) как есть, неразрывные пробелы как&nbsp;<tt>&amp;amp;nbsp;</tt>.">
                          Смешанный (Mixed)
                        </option>
                        <option value="unicode"
                                data-desc="Компактно. Все символы в&nbsp;UTF-8 (включая неразрывный пробел U+00A0).">
                          Юникод (Unicode)
                        </option>
                        <option value="mnemonic"
                                data-desc="Совместимость c&nbsp;koi8r и&nbsp;cp1251. Все спецсимволы заменяются на&nbsp;HTML-мнемоники (<tt>&amp;amp;mdash;</tt>, <tt>&amp;amp;copy;</tt> и&nbsp;пр.)">
                          Мнемоники (Mnemonic)
                        </option>
                      </select>
                    </div>
                    <div class="ms-4 ps-1 form-text text-muted small mb-2" style="min-height: 2.5em;"
                         x-html="desc"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Кнопка отправки -->
        <button type="submit" class="btn btn-primary btn-lg w-100" onclick="sendGoal('etpgrf-btn-pressed')">Типографировать</button>
      </form>
    </div>

    <div class="col-md-12 my-4">
      <div class="d-flex justify-content-between align-items-end mb-2">
        <label class="form-label fw-bold small text-muted ls-1 mb-0">
          <i class="bi bi-code-slash me-1"></i> Результат обработки:
        </label>
        <div class="d-flex align-items-center">
            <span id="processing-time" class="small text-muted me-3 nowrap"></span>
            <button id="btn-copy" class="btn btn-sm btn-outline-secondary d-none" title="Копировать в буфер обмена">
              <i class="bi bi-clipboard me-1"></i> Копировать в&nbsp;буфер обмена
            </button>
        </div>
      </div>
      <div id="cm-result-wrapper" class="result-box p-0"></div>
      <div id="result-area" style="display: none;"></div>
    </div>

    {# ИНФОРМАЦИОННЫЙ И SEO-БЛОК #}
    <div class="col-md-12 mt-4 pt-3 border-top">
      <div class="text-center mb-3">
        <button class="btn btn-sm btn-outline-secondary rounded-pill px-3 py-1 shadow-sm collapse-toggle-btn collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#seoDetailsCollapse"
                aria-expanded="false"
                aria-controls="seoDetailsCollapse">
          <i class="bi bi-info-circle me-1"></i> О&nbsp;сервисе, возможности и&nbsp;правила
          <i class="bi bi-chevron-down ms-1 collapse-icon"></i>
        </button>
      </div>

      <div class="collapse" id="seoDetailsCollapse">
        <section class="mb-5 pt-3">
        <h2 class="h4 mb-4">Возможности онлайн-типографа etpgrf</h2>
        <div class="row g-4">
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-distribute-horizontal me-1"></i> Неразрывные пробелы (&amp;nbsp;)</h3>
              <p class="small text-muted mb-0">
                Автоматическая привязка предлогов, союзов, частиц (&laquo;в&raquo;, &laquo;на&raquo;, &laquo;с&raquo;, &laquo;и&raquo;, &laquo;не&raquo;, &laquo;бы&raquo;…) и&nbsp;артиклей (&bdquo;the&ldquo;, &bdquo;a&ldquo;, &bdquo;is&ldquo;…). Парсер &laquo;видит&raquo; и&nbsp;связывает их&nbsp;со&nbsp;словами даже сквозь кавычки и&nbsp;скобки (например, <code>и&amp;nbsp;&laquo;Беда&raquo; села на&nbsp;мель</code>).
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-quote me-1"></i> Кавычки «ёлочки» и&nbsp;„лапки“</h3>
              <p class="small text-muted mb-0">
                Замена машинных прямых кавычек (<code>&quot;</code>) на&nbsp;правильные русские &laquo;ёлочки&raquo; и&nbsp;французские &bdquo;лапки&ldquo; для&nbsp;вложенных цитат. Поддержка английской, современной русской и&nbsp;русской дореформенной типографики (&laquo;безъ&raquo;, &laquo;въ&raquo;, &laquo;надъ&raquo;, &laquo;сiя&raquo;…).
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-dash-lg me-1"></i> Тире, числа и&nbsp;диапазоны</h3>
              <p class="small text-muted mb-0">
                Замена дефисов на&nbsp;длинное тире (&mdash;) с&nbsp;языковой отбивкой, среднее тире (&ndash;) в&nbsp;числовых интервалах (1941&ndash;1945, 10&ndash;20&nbsp;кг). Корректная обработка арабских и&nbsp;римских чисел (например, XXI&nbsp;век, III&nbsp;в.&nbsp;н.&nbsp;э.).
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-person-badge me-1"></i> Инициалы и&nbsp;сокращения</h3>
              <p class="small text-muted mb-0">
                Связывание неразрывными пробелами инициалов (А.С.&nbsp;Пушкин), устойчивых сокращений (ЗАО&nbsp;&laquo;Рога и&nbsp;Копыта&raquo;, др.&nbsp;Барменталь), сокращений (&laquo;и&nbsp;т.д.&raquo;, &laquo;и&nbsp;др.&raquo;), знаков (&sect;&nbsp;5, &#8470;&nbsp;12) и&nbsp;единиц (100&nbsp;руб., 50&nbsp;м&sup2;).
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-layout-text-sidebar me-1"></i> Висячая пунктуация</h3>
              <p class="small text-muted mb-0">
                Оптическое выравнивание левого и&nbsp;правого края текстового блока за&nbsp;счет выноса кавычек, скобок и&nbsp;тире за&nbsp;границу полосы набора. Идеально для&nbsp;крупных заголовков, цитат, выносов и&nbsp;врезок.
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-shield-check me-1"></i> Санитайзер и&nbsp;спецсимволы</h3>
              <p class="small text-muted mb-0">
                Встроенный HTML-санитайзер: очистка текста от&nbsp;мусорных тегов при&nbsp;копировании из&nbsp;Word/Google Docs, сброс разметки висячей пунктуации. Обработка псевдографики (<code>(c)</code>&nbsp;&rarr;&nbsp;&copy;, <code>(tm)</code>&nbsp;&rarr;&nbsp;&trade;, <code>+/-</code>&nbsp;&rarr;&nbsp;&plusmn;).
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-fonts me-1"></i> Переносы в&nbsp;словах</h3>
              <p class="small text-muted mb-0">
                Автоматическая расстановка мягких переносов (<code>&amp;shy;</code>) в&nbsp;длинных словах с&nbsp;настраиваемым порогом длины (от&nbsp;12&nbsp;символов). Колонки текста аккуратно перено&shy;сятся в&nbsp;узких блоках и&nbsp;на&nbsp;мобильных экранах без&nbsp;разрыва вёрстки.
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-code-slash me-1"></i> Форматы вывода и&nbsp;гибкие правила</h3>
              <p class="small text-muted mb-0">
                Поддержка HTML с&nbsp;мнемониками, смешанного режима и&nbsp;Unicode (UTF-8) для&nbsp;постов в&nbsp;соцсетях (VK, Telegram, Reddit). Любые группы правил можно гибко комбинировать, включать или&nbsp;отключать под&nbsp;конкретную задачу или&nbsp;проект.
              </p>
            </div>
          </div>
          <div class="col-md-6 col-lg-4">
            <div class="p-3 border rounded bg-body-tertiary h-100 feature-card">
              <h3 class="h6 fw-bold"><i class="bi bi-infinity me-1"></i> Бесплатно и&nbsp;безлимитно</h3>
              <p class="small text-muted mb-0">
                Полная свобода использования без&nbsp;ограничений по&nbsp;объёму текста, без&nbsp;регистрации, подписок и&nbsp;рекламы. Доступен как&nbsp;онлайн-сервис, так и&nbsp;в&nbsp;виде открытой библиотеки для&nbsp;Python по&nbsp;лицензии MIT.
              </p>
            </div>
          </div>
        </div>
      </section>
      <hr />
      <section class="mb-5">
        <h2 class="h4 mb-3">Кому подходит типограф ETPGRF</h2>
        <div class="row g-3">
          <div class="col-md-4">
            <div class="border-start border-3 border-secondary ps-3">
              <h3 class="h6 fw-bold">Контент-менеджерам и&nbsp;дизайнерам</h3>
              <p class="small text-muted">
                Профессиональный визуальный ритм и&nbsp;читаемость текста в&nbsp;веб-интерфейсах, блогах, SMM-публикациях в&nbsp;соцсетях и&nbsp;электронных рассылках.
              </p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="border-start border-3 border-secondary ps-3">
              <h3 class="h6 fw-bold">Веб-разработчикам и&nbsp;верстальщикам</h3>
              <p class="small text-muted">
                Получайте чистый, валидный HTML-код с&nbsp;неразрывными пробелами и&nbsp;мнемониками, готовый к&nbsp;вставке в&nbsp;шаблоны, CMS и&nbsp;лендинги.
              </p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="border-start border-3 border-secondary ps-3">
              <h3 class="h6 fw-bold">Редакторам и&nbsp;копирайтерам</h3>
              <p class="small text-muted">
                Быстрая автоматическая подготовка статей, колонок и&nbsp;постов для&nbsp;публикации без&nbsp;рутинной ручной расстановки спецсимволов.
              </p>
            </div>
          </div>

        </div>
      </section>
      <hr />
      <section class="mb-5">
        <h2 class="h4 mb-3">Интеграция в&nbsp;проекты: Python-библиотека etpgrf</h2>
        <p class="small text-muted">
          Вы&nbsp;можете свободно использовать движок etpgrf-типографа офлайн в&nbsp;своих Python-скриптах, Django-, FastAPI- или&nbsp;Flask-приложениях и&nbsp;сайтах:
        </p>
        <div class="bg-body-tertiary p-3 rounded border font-monospace small mb-3">
          <div class="text-secondary mb-1"># Установка через pip:</div>
          <div class="text-success fw-bold mb-3">pip install etpgrf</div>
          <div class="text-secondary mb-1"># Пример использования в коде:</div>
          <div><span class="text-primary">from</span> etpgrf.main <span class="text-primary">import</span> Typographer</div>
          <div class="mt-1">tp = Typographer(lang=<span class="text-success">'ru'</span>, mode=<span class="text-success">'mixed'</span>)</div>
          <div>formatted_html = tp.process(<span class="text-success">'Правильная вёрстка "кавычек" и отбивка тире -- улучшают читаемость текста на сайте!'</span>)</div>
        </div>
        <p class="small text-muted mb-0">
          Подробная документация и&nbsp;исходный код библиотеки открыты на&nbsp;<a href="https://github.com/erjemin/etpgrf" target="_blank" rel="noopener">GitHub</a> и&nbsp;<a href="https://pypi.org/project/etpgrf/" target="_blank" rel="noopener">PyPI</a>.
        </p>
      </section>
      <hr />
      <section class="mb-5">
        <h2 class="h4 mb-3">Часто задаваемые вопросы (FAQ)</h2>
        <div class="accordion" id="faqAccordion">
          <div class="accordion-item bg-body-tertiary">
            <h3 class="accordion-header" id="faqHeadingOne">
              <button class="accordion-button collapsed bg-body-tertiary" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne" aria-expanded="false" aria-controls="faqOne">
                Зачем типографировать текст перед публикацией на сайте?
              </button>
            </h3>
            <div id="faqOne" class="accordion-collapse collapse" aria-labelledby="faqHeadingOne" data-bs-parent="#faqAccordion">
              <div class="accordion-body small text-muted">
                В&nbsp;вебе строки переносятся динамически в&nbsp;зависимости от&nbsp;экрана устройства. Без&nbsp;неразрывных пробелов предлоги и&nbsp;союзы часто &laquo;висят&raquo; на&nbsp;концах строк, а&nbsp;дефисы путаются с&nbsp;длинным тире. Типографика делает текст легким для&nbsp;восприятия и&nbsp;профессиональным.
              </div>
            </div>
          </div>
          <div class="accordion-item bg-body-tertiary">
            <h3 class="accordion-header" id="faqHeadingTwo">
              <button class="accordion-button collapsed bg-body-tertiary" type="button" data-bs-toggle="collapse" data-bs-target="#faqTwo" aria-expanded="false" aria-controls="faqTwo">
                Чем ETPGRF отличается от Типографа Студии Лебедева или Типографа Муравьёва?
              </button>
            </h3>
            <div id="faqTwo" class="accordion-collapse collapse" aria-labelledby="faqHeadingTwo" data-bs-parent="#faqAccordion">
              <div class="accordion-body small text-muted">
                ETPGRF разработан на&nbsp;современной открытой кодовой базе Python 3, активно поддерживается, умеет корректно обрабатывать смешанные русско-английские тексты (ru+en), имеет гибкий выбор режима кодирования (Unicode/HTML-мнемоники), настраиваемую висячую пунктуацию и&nbsp;может работать как&nbsp;локальный модуль или веб-микросервис.
              </div>
            </div>
          </div>
          <div class="accordion-item bg-body-tertiary">
            <h3 class="accordion-header" id="faqHeadingThree">
              <button class="accordion-button collapsed bg-body-tertiary" type="button" data-bs-toggle="collapse" data-bs-target="#faqThree" aria-expanded="false" aria-controls="faqThree">
                Сохраняются ли введённые тексты на сервере?
              </button>
            </h3>
            <div id="faqThree" class="accordion-collapse collapse" aria-labelledby="faqHeadingThree" data-bs-parent="#faqAccordion">
              <div class="accordion-body small text-muted">
                Нет, сервис соблюдает полную конфиденциальность. Тексты обрабатываются исключительно в&nbsp;памяти в&nbsp;момент отправки запроса и&nbsp;не&nbsp;сохраняются в&nbsp;базу данных и&nbsp;логи.
              </div>
            </div>
          </div>
        </div>
      </section>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script type="module" src="{% static 'js/index.js' %}" defer></script>
{% endblock %}