add: добавлена кнопка "скопировать в буфер обмена" и отслеживание целей в Yandex-Metrica и Top-Mail.ru

add: Текст-запевка
add: мета-теги для SEO и соцсетей
2026-01-20 00:56:23 +03:00 · 2026-01-19 22:35:54 +03:00 · 2026-01-19 21:23:41 +03:00 · 2026-01-18 02:33:50 +03:00
5 changed files with 255 additions and 107 deletions
--- a/etpgrf_site/typograph/templates/typograph/base.html
+++ b/etpgrf_site/typograph/templates/typograph/base.html
@@ -3,20 +3,43 @@
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {# --- SEO & Meta Tags --- #}
    <title>{% block title %}ETPGRF — единая типографика для веба{% endblock %}</title>
-    {# Favicons #} <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96" />
+    <meta name="description" content="{% block description %}Бесплатный онлайн-типограф для подготовки текстов к публикации в вебе. Расставка неразрывных пробелов, правильных кавычек («ёлочки»), тире, спецсимволы, отбивка, компоновка, висячая пунктуация. Идеально для верстки сайтов, статей и постов.{% endblock %}">
    <meta name="keywords" content="типограф, типографика, онлайн типограф, подготовка текста для веба, html типограф, неразрывные пробелы, кавычки елочки, длинное тире, очистка текста от мусора, интернет верстка, муравьев">
    <meta name="author" content="Sergei Erjemin">
    {# --- Open Graph (Facebook, VK, LinkedIn, Telegram) --- #}
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="ETPGRF">
    <meta property="og:url" content="{{ request.build_absolute_uri }}">
    <meta property="og:title" content="{% block og_title %}ETPGRF — единая типографика для веба{% endblock %}">
    <meta property="og:description" content="{% block og_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик. Умная типографика для веб-дизайнеров, редакторов и контент-менеджеров.{% endblock %}">
    {# Картинка должна быть абсолютной ссылкой #}
    <meta property="og:image" content="{% block og_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    {# --- Twitter Cards (X) --- #}
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{% block twitter_title %}ETPGRF — единая типографика для веба{% endblock %}">
    <meta name="twitter:description" content="{% block twitter_description %}Сделайте ваш текст профессиональным и готовым к публикации в интернете за один клик.{% endblock %}">
    <meta name="twitter:image" content="{% block twitter_image %}{{ request.scheme }}://{{ request.get_host }}{% static 'img/etpgrf-logo-for-fb-vk-x.gif' %}{% endblock %}">
    {# --- Favicons --- #}
    <link rel="icon" type="image/png" href="{% static 'favicon-96x96.png' %}" sizes="96x96" />
    <link rel="icon" href="{% static 'favicon-light.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: light)">
    <link rel="icon" href="{% static 'favicon-dark.svg' %}" type="image/svg+xml" media="(prefers-color-scheme: dark)">
    <link rel="icon" type="image/svg+xml" href="{% static 'favicon.svg' %}" />
-    {# Fallback для старых браузеров #}<link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" />
+    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" />
-    {# iOS Icon #}<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
+    <link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
    <link rel="manifest" href="{% static 'site.webmanifest' %}" />
    {# Bootstrap 5 CSS #}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
    {# Bootstrap Icons #}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
    {# Custom CSS #}<link href="{% static 'css/etpgrf.css' %}" rel="stylesheet" />
    {# HTMX #}<script src="https://unpkg.com/htmx.org@1.9.10"></script>
    {# Alpine.js #}<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    {# Polyfill for Import Maps #}<script async src="https://ga.jspm.io/npm:es-module-shims@1.10.0/dist/es-module-shims.js"></script>
 </head>
 <body>
@@ -41,8 +64,8 @@
 {# Футер #}
 <footer class="footer mt-auto py-3">
  <div class="container">
-    <span class="text-muted small">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}</span>
+    <span class="text-muted small">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
-    <span class="text-muted small float-end">версия 0.1.0</span>
+    <span class="text-muted small float-end">v0.1.2</span>
  </div>
 </footer>
--- a/etpgrf_site/typograph/templates/typograph/index.html
+++ b/etpgrf_site/typograph/templates/typograph/index.html
@@ -4,14 +4,40 @@
 {% block content %}
  <div class="row">
    <div class="col-md-12">
-      <h3>Типограф</h3>
+
      {# 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">
          <label class="form-label fw-bold small text-muted ls-1">
            <i class="bi bi-file-text me-1"></i> Исходный текст:
          </label>
          <textarea class="form-control" name="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"
@@ -239,12 +265,19 @@
        </div>
        <!-- Кнопка отправки -->
-        <button type="submit" class="btn btn-primary btn-lg w-100">Типографировать</button>
+        <button type="submit" class="btn btn-primary btn-lg w-100" onclick="sendGoal('etpgrf-btn-pressed')">Типографировать</button>
      </form>
    </div>
    <div class="col-md-12 mt-4">
-      <h3>Результат</h3>
+      <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>
        <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 id="cm-result-wrapper" class="result-box p-0"></div>
      <div id="result-area" style="display: none;"></div>
    </div>
--- a/public/static/img/etpgrf-logo-for-fb-vk-x.gif
+++ b/public/static/img/etpgrf-logo-for-fb-vk-x.gif
--- a/public/static/js/base.js
+++ b/public/static/js/base.js
@@ -1,106 +1,133 @@
 (function () {
-  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    "use strict";
  const logoImg = document.getElementById('logo-img');
  const navbar = document.getElementById('main-navbar');
-  // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
+    // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
-  function updateTheme(e) {
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const theme = e.matches ? 'dark' : 'light';
    document.documentElement.setAttribute('data-bs-theme', theme);
  }
-  // --- ОБНОВЛЕНИЕ ЛОГОТИПА ПРИ СКРОЛЛЕ И СМЕНЕ ТЕМЫ ---
+    function updateTheme(e) {
-  function updateLogo() {
+        const theme = e.matches ? 'dark' : 'light';
-    const isDark = darkModeMediaQuery.matches;
+        document.documentElement.setAttribute('data-bs-theme', theme);
-    // Используем getBoundingClientRect для определения позиции контента
+        // При смене темы обновляем и логотип
-    if (document.getElementById('content-container').getBoundingClientRect().top < 78) {
+        updateLogo();
      navbar.classList.add('navbar-scrolled');
      logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact;
    } else {
      navbar.classList.remove('navbar-scrolled');
      logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight;
    }
  }
-  // Инициализация
+    // --- ЛОГОТИП И СКРОЛЛ ---
-  updateTheme(darkModeMediaQuery);
+    function updateLogo() {
-  updateLogo();
+        const logoImg = document.getElementById('logo-img');
-  document.addEventListener('DOMContentLoaded', updateLogo);
+        const navbar = document.getElementById('main-navbar');
        if (!logoImg || !navbar) return;
-  // Слушаем скролл
+        const isDark = darkModeMediaQuery.matches;
-  window.addEventListener('scroll', updateLogo);
+        // Используем window.scrollY для определения прокрутки
        // Если прокрутили больше 50px, уменьшаем шапку
        const isScrolled = window.scrollY > 50; 
-  // Слушаем смену темы
+        if (isScrolled) {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo);
+            navbar.classList.add('navbar-scrolled');
-
+            logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact;
-  // --- КУКИ ---
+        } else {
-  const COOKIE_KEY = 'cookie_consent';
+            navbar.classList.remove('navbar-scrolled');
-  const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней: 90 * 24 * 60 * 60 * 1000 = 7776000000)
+            logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight;
-
+        }
  const banner = document.getElementById('cookie-banner');
  const acceptButton = document.getElementById('cookie-accept');
  function loadCounters() {
    console.log("Загрузка счетчиков (Яндекс, Google)...");
    // Код Яндекс.Метрики
    // (function(m,e,t,r,i,k,a){...})(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
    // ym(XXXXXX, "init", {...});
    // Код Google Analytics
    // window.dataLayer = window.dataLayer || [];
    // function gtag(){dataLayer.push(arguments);}
    // gtag('js', new Date());
    // gtag('config', 'G-XXXXXXXXXX');
    // Код Top.Mail.Ru
    var _tmr = window._tmr || (window._tmr = []);
    _tmr.push({id: "3734603", type: "pageView", start: (new Date()).getTime()});
    (function (d, w, id) {
       if (d.getElementById(id)) return;
       var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
       ts.src = "https://top-fwz1.mail.ru/js/code.js";
       var f = function () {var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);};
       if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); }
     })(document, window, "tmr-code");
    // <noscript><div><img src="https://top-fwz1.mail.ru/counter?id=3734603;js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
    // <!-- /Top.Mail.Ru counter -->
    // и т.д.
    // alert("Отладка. Счетчики загружены (здесь должен быть реальный код счетчиков).");
  }
  function checkConsent() {
    const stored = localStorage.getItem(COOKIE_KEY);
    if (!stored) return false;
    try {
      const data = JSON.parse(stored);
      const now = Date.now();
      // Проверяем, не истек ли срок
      if (now - data.timestamp > TTL_MS) {
        localStorage.removeItem(COOKIE_KEY);
        return false;
      }
      return true;
    } catch (e) {
      return false;
    }
  }
-  if (checkConsent()) {
+    // Инициализация темы и логотипа
-    loadCounters();
+    updateTheme(darkModeMediaQuery);
-  } else {
+    darkModeMediaQuery.addEventListener('change', updateTheme);
-    banner.style.display = 'block';
+    
-  }
+    // Инициализация логотипа при загрузке и скролле
    document.addEventListener('DOMContentLoaded', updateLogo);
    window.addEventListener('scroll', updateLogo);
-  acceptButton.addEventListener('click', function () {
+
-    const data = {
+    // --- КУКИ И СЧЕТЧИКИ ---
-      value: true,
+    const COOKIE_KEY = 'cookie_consent';
-      timestamp: Date.now()
+    const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней
    const MAILRU_ID = "3734603";
    const YANDEX_ID = "106310834";
    function loadCounters() {
        // console.log("Загрузка счетчиков...");
        try {
            // Mail.ru
            var _tmr = window._tmr || (window._tmr = []);
            _tmr.push({id: MAILRU_ID, type: "pageView", start: (new Date()).getTime()});
            (function (d, w, id) {
              if (d.getElementById(id)) return;
              var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
              ts.src = "https://top-fwz1.mail.ru/js/code.js";
              var f = d.getElementsByTagName("script")[0]; f.parentNode.insertBefore(ts, f);
            })(document, window, "topmailru-code");
            // Яндекс.Метрика
            (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
            m[i].l=1*new Date();
            for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
            k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
            (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
            window.ym(YANDEX_ID, "init", {
                 clickmap:true,
                 trackLinks:true,
                 accurateTrackBounce:true
            });
        } catch (e) {
            console.error("Ошибка загрузки счетчиков:", e);
        }
    }
    function checkConsent() {
        try {
            const stored = localStorage.getItem(COOKIE_KEY);
            if (!stored) return false;
            const data = JSON.parse(stored);
            const now = Date.now();
            if (now - data.timestamp > TTL_MS) {
                localStorage.removeItem(COOKIE_KEY);
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    // Инициализация куки-баннера
    document.addEventListener('DOMContentLoaded', function() {
        const banner = document.getElementById('cookie-banner');
        const acceptButton = document.getElementById('cookie-accept');
        if (banner && acceptButton) {
            if (checkConsent()) {
                loadCounters();
            } else {
                banner.style.display = 'block';
            }
            acceptButton.addEventListener('click', function () {
                const data = { value: true, timestamp: Date.now() };
                localStorage.setItem(COOKIE_KEY, JSON.stringify(data));
                banner.style.display = 'none';
                loadCounters();
            });
        }
    });
    // Глобальная функция для отправки целей
    window.sendGoal = function(goalName) {
        if (!checkConsent()) return;
        // console.log("Sending goal:", goalName);
        try {
            if (window._tmr) {
                window._tmr.push({ id: MAILRU_ID, type: "reachGoal", goal: goalName, value: 1 });
            }
            if (typeof window.ym === 'function') {
                window.ym(YANDEX_ID, 'reachGoal', goalName);
            }
        } catch (e) {
            console.error("Ошибка отправки цели:", e);
        }
    };
-    localStorage.setItem(COOKIE_KEY, JSON.stringify(data));
+})();
    banner.style.display = 'none';
    loadCounters();
  });
 })();
--- a/public/static/js/index.js
+++ b/public/static/js/index.js
@@ -19,9 +19,12 @@ import {
 } from "../codemirror/editor.js";
 const resultWrapper = document.getElementById('cm-result-wrapper');
 const btnCopy = document.getElementById('btn-copy');
 const sourceTextarea = document.querySelector('textarea[name="text"]');
 // console.log("Index.js loaded. btnCopy:", !!btnCopy, "sourceTextarea:", !!sourceTextarea); // DEBUG
 const themeCompartment = new Compartment();
 function getTheme() {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? oneDark : [];
 }
@@ -47,8 +50,10 @@ const charNames = {
  0x2063: "Invisible Comma (невидимая запятая для семантической разметки математических выражений — &InvisibleComma;)",
 };
 const PLACEHOLDER_TEXT = "Здесь появится результат...";
 const resultState = EditorState.create({
-  doc: "Здесь появится результат...",
+  doc: PLACEHOLDER_TEXT,
  extensions: [
    lineNumbers(),
    highlightActiveLineGutter(),
@@ -83,17 +88,77 @@ const resultView = new EditorView({
  parent: resultWrapper
 });
 // Обработка ответа от сервера (HTMX)
 document.body.addEventListener('htmx:afterSwap', function (evt) {
  // console.log("HTMX afterSwap event:", evt.detail.target.id); // DEBUG
  if (evt.detail.target.id === 'result-area') {
    const newContent = evt.detail.xhr.response;
    // Обновляем редактор
    resultView.dispatch({
      changes: {from: 0, to: resultView.state.doc.length, insert: newContent}
    });
    // Показываем кнопку копирования
    if (btnCopy) {
        // console.log("Showing copy button"); // DEBUG
        btnCopy.classList.remove('d-none');
    }
  }
 });
 // Скрываем кнопку и сбрасываем редактор при изменении исходного текста
 if (sourceTextarea) {
  sourceTextarea.addEventListener('input', () => {
    if (btnCopy) {
      btnCopy.classList.add('d-none');
    }
    // Сбрасываем редактор на плейсхолдер
    if (resultView.state.doc.toString() !== PLACEHOLDER_TEXT) {
        resultView.dispatch({
          changes: {from: 0, to: resultView.state.doc.length, insert: PLACEHOLDER_TEXT}
        });
    }
  });
 }
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
  resultView.dispatch({
    effects: themeCompartment.reconfigure(getTheme())
  });
 });
 // --- КОПИРОВАНИЕ В БУФЕР ---
 if (btnCopy) {
  btnCopy.addEventListener('click', async () => {
    const text = resultView.state.doc.toString();
    // console.log("Copying text:", text.substring(0, 20) + "..."); // DEBUG
    // Отправляем цель в метрику
    if (typeof window.sendGoal === 'function') {
        window.sendGoal('etpgrf-copy-pressed');
    }
    try {
      await navigator.clipboard.writeText(text);
      // Визуальное подтверждение
      const originalHtml = btnCopy.innerHTML;
      const originalClass = btnCopy.className; 
      btnCopy.innerHTML = '<i class="bi bi-check-lg me-1"></i> Скопировано!';
      btnCopy.classList.remove('btn-outline-secondary', 'btn-outline-primary');
      btnCopy.classList.add('btn-success');
      setTimeout(() => {
        btnCopy.innerHTML = originalHtml;
        btnCopy.className = originalClass;
        btnCopy.classList.remove('d-none'); 
      }, 2000);
    } catch (err) {
      console.error('Ошибка копирования:', err);
      alert('Не удалось скопировать текст.');
    }
  });
 }
Author	SHA1	Message	Date
erjemin	92711f57c2	add: добавлена кнопка "скопировать в буфер обмена" и отслеживание целей в Yandex-Metrica и Top-Mail.ru All checks were successful Build ETPGRF-site / build (push) Successful in 1m26s Details	2026-01-20 00:56:23 +03:00
erjemin	56794f5b09	add: Текст-запевка	2026-01-19 22:35:54 +03:00
erjemin	9cb685b569	add: мета-теги для SEO и соцсетей	2026-01-19 21:23:41 +03:00
erjemin	5d5d48d1d8	add: счетчики Yandex и Mail All checks were successful Build ETPGRF-site / build (push) Successful in 1m25s Details	2026-01-18 02:33:50 +03:00