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
5 changed files with 254 additions and 114 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" />
-    {# iOS Icon #}<link rel="apple-touch-icon" sizes="180x180" href="{% static 'apple-touch-icon.png' %}" />
+    <link rel="shortcut icon" href="{% static 'favicon.ico' %}" sizes="any" />
+    <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 float-end">v0.1.1</span>
+    <span class="text-muted small">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</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,114 +1,133 @@
 (function () {
-  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-  const logoImg = document.getElementById('logo-img');
-  const navbar = document.getElementById('main-navbar');
+    "use strict";

-  // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
-  function updateTheme(e) {
-    const theme = e.matches ? 'dark' : 'light';
-    document.documentElement.setAttribute('data-bs-theme', theme);
-  }
+    // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');

-  // --- ОБНОВЛЕНИЕ ЛОГОТИПА ПРИ СКРОЛЛЕ И СМЕНЕ ТЕМЫ ---
-  function updateLogo() {
-    const isDark = darkModeMediaQuery.matches;
-    // Используем getBoundingClientRect для определения позиции контента
-    if (document.getElementById('content-container').getBoundingClientRect().top < 78) {
-      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;
+    function updateTheme(e) {
+        const theme = e.matches ? 'dark' : 'light';
+        document.documentElement.setAttribute('data-bs-theme', theme);
+        // При смене темы обновляем и логотип
+        updateLogo();
    }
-  }

-  // Инициализация
-  updateTheme(darkModeMediaQuery);
-  updateLogo();
-  document.addEventListener('DOMContentLoaded', updateLogo);
+    // --- ЛОГОТИП И СКРОЛЛ ---
+    function updateLogo() {
+        const logoImg = document.getElementById('logo-img');
+        const navbar = document.getElementById('main-navbar');
+        
+        if (!logoImg || !navbar) return;

-  // Слушаем скролл
-  window.addEventListener('scroll', updateLogo);
+        const isDark = darkModeMediaQuery.matches;
+        // Используем window.scrollY для определения прокрутки
+        // Если прокрутили больше 50px, уменьшаем шапку
+        const isScrolled = window.scrollY > 50; 

-  // Слушаем смену темы
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo);
+        if (isScrolled) {
+            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;
+        }
+    }

-  // --- КУКИ ---
-  const COOKIE_KEY = 'cookie_consent';
-  const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней: 90 * 24 * 60 * 60 * 1000 = 7776000000)
+    // Инициализация темы и логотипа
+    updateTheme(darkModeMediaQuery);
+    darkModeMediaQuery.addEventListener('change', updateTheme);
+    
+    // Инициализация логотипа при загрузке и скролле
+    document.addEventListener('DOMContentLoaded', updateLogo);
+    window.addEventListener('scroll', updateLogo);

-  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) {
-      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?id=106310834', 'ym');
-    ym(106310834, 'init', {
-      ssr: true, webvisor: true, clickmap: true, ecommerce: "dataLayer",
-      accurateTrackBounce: true, trackLinks: true
+    // --- КУКИ И СЧЕТЧИКИ ---
+    const COOKIE_KEY = 'cookie_consent';
+    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();
+            });
+        }
    });
-
-    // Код 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>
-    // 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();
-  } else {
-    banner.style.display = 'block';
-  }
-
-  acceptButton.addEventListener('click', function () {
-    const data = {
-      value: true,
-      timestamp: Date.now()
+    
+    // Глобальная функция для отправки целей
+    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