Create index.html

index.html

@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Проверка русского текста (LanguageTool)</title>
+<style>
+  * { box-sizing: border-box; }
+  body { font-family: -apple-system, Segoe UI, Roboto, sans-serif; margin: 0; padding: 12px; background: #f4f6f8; }
+  h1 { font-size: 18px; margin: 0 0 10px; }
+  .toolbar { margin-bottom: 10px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+  button { padding: 8px 12px; font-size: 14px; cursor: pointer; border: none; border-radius: 6px; background: #2563eb; color: #fff; }
+  button:disabled { background: #94a3b8; cursor: not-allowed; }
+  button.pause { background: #f59e0b; }
+  button.reset { background: #64748b; }
+  .cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
+  @media (max-width: 900px) {
+    .cols { grid-template-columns: 1fr; }
+    textarea, .output { height: 40vh; }
+  }
+  .col { background: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
+  .col h2 { font-size: 13px; margin: 0 0 8px; color: #334155; text-transform: uppercase; letter-spacing: .5px; }
+  textarea { width: 100%; height: 55vh; resize: vertical; font-size: 14px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-family: inherit; }
+  .output { height: 55vh; overflow-y: auto; font-size: 14px; line-height: 1.5; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: #fafafa; white-space: pre-wrap; word-wrap: break-word; }
+  .chunk-buttons { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
+  .chunk-buttons button { background: #0ea5e9; font-size: 13px; padding: 6px 10px; }
+  .chunk-buttons button.done { background: #16a34a; }
+  .chunk-buttons button.err { background: #dc2626; }
+  .chunk-info { font-size: 12px; color: #64748b; margin-top: 6px; }
+  .status { font-size: 13px; color: #475569; margin-left: 8px; }
+  .err { background: #fee2e2; border-bottom: 2px solid #ef4444; cursor: help; }
+  .fix { background: #dcfce7; color: #166534; font-weight: 600; }
+  .block { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed #e2e8f0; }
+  .block-title { font-size: 11px; color: #94a3b8; margin-bottom: 4px; }
+  .issue { background: #fff; border-left: 4px solid #ef4444; padding: 6px 8px; margin-bottom: 6px; border-radius: 4px; font-size: 13px; }
+  .issue.ok { border-color: #16a34a; }
+  .issue .msg { font-weight: 600; }
+  .issue .sugg { color: #16a34a; }
+  .issue .ctx { color: #64748b; font-size: 12px; margin-top: 3px; }
+  .issue pre { white-space: pre-wrap; word-wrap: break-word; font-size: 12px; margin: 4px 0 0; color: #7f1d1d; }
+</style>
+</head>
+<body>
+
+<h1>Проверка русского текста — LanguageTool</h1>
+
+<div class="toolbar">
+  <button id="btnSplit">Разбить на куски ≤ 20000 знаков</button>
+  <button id="btnRunAll" disabled>Проверить все куски</button>
+  <button id="btnPause" class="pause" disabled>Пауза</button>
+  <button id="btnReset" class="reset">Сброс</button>
+  <span class="status" id="status"></span>
+</div>
+
+<div class="cols">
+  <div class="col">
+    <h2>1. Ваш текст</h2>
+    <textarea id="input" placeholder="Вставьте сюда большой русский текст..."></textarea>
+    <div class="chunk-info" id="chunkInfo"></div>
+    <div class="chunk-buttons" id="chunkButtons"></div>
+  </div>
+
+  <div class="col">
+    <h2>2. Результаты проверки</h2>
+    <div class="output" id="results">Здесь появятся ошибки по каждому куску…</div>
+  </div>
+
+  <div class="col">
+    <h2>3. Текст с подсветкой</h2>
+    <div class="output" id="highlighted">Здесь будет сводный текст: красным — проблемные места, зелёным — предложенные исправления.</div>
+  </div>
+</div>
+
+<script>
+// Публичный API LanguageTool.
+// Если тут будет CORS/блокировка — поменяйте на 'https://languagetool.org/api/v2/check'
+const API = 'https://api.languagetool.org/v2/check';
+const LIMIT = 20000;
+
+const input = document.getElementById('input');
+const results = document.getElementById('results');
+const highlighted = document.getElementById('highlighted');
+const chunkButtons = document.getElementById('chunkButtons');
+const chunkInfo = document.getElementById('chunkInfo');
+const status = document.getElementById('status');
+
+let chunks = [];
+let running = false;
+let paused = false;
+
+/* ================== СИНХРОННАЯ ПРОКРУТКА ================== */
+const scrollables = [input, results, highlighted];
+let syncing = false;
+
+function syncScroll(source) {
+  if (syncing) return;
+  syncing = true;
+  const srcMax = source.scrollHeight - source.clientHeight;
+  const ratio = srcMax > 0 ? source.scrollTop / srcMax : 0;
+  scrollables.forEach(el => {
+    if (el === source) return;
+    const max = el.scrollHeight - el.clientHeight;
+    if (max > 0) el.scrollTop = ratio * max;
+  });
+  requestAnimationFrame(() => { syncing = false; });
+}
+scrollables.forEach(el => {
+  el.addEventListener('scroll', () => syncScroll(el), { passive: true });
+});
+/* =========================================================== */
+
+/* ---------- Разбивка на куски ≤ LIMIT по абзацам ---------- */
+function splitText(text, limit) {
+  const parts = [];
+  const paragraphs = text.split(/(\n\s*\n)/);
+  let buf = '';
+  let cursor = 0;
+  let bufStart = 0;
+
+  function flush() {
+    if (buf.length > 0) {
+      parts.push({ text: buf, start: bufStart, end: bufStart + buf.length, done: false, matches: [], error: null });
+      buf = '';
+    }
+  }
+
+  for (const p of paragraphs) {
+    if (p.length > limit) {
+      flush();
+      const pieces = hardSplit(p, limit);
+      for (const piece of pieces) {
+        parts.push({ text: piece, start: cursor, end: cursor + piece.length, done: false, matches: [], error: null });
+        cursor += piece.length;
+      }
+      bufStart = cursor;
+      continue;
+    }
+    if ((buf + p).length > limit) {
+      flush();
+      bufStart = cursor;
+    }
+    if (buf.length === 0) bufStart = cursor;
+    buf += p;
+    cursor += p.length;
+  }
+  flush();
+  return parts;
+}
+
+function hardSplit(s, limit) {
+  const out = [];
+  let i = 0;
+  while (i < s.length) {
+    let end = Math.min(i + limit, s.length);
+    if (end < s.length) {
+      const slice = s.substring(i, end);
+      const lastDot = Math.max(slice.lastIndexOf('. '), slice.lastIndexOf('! '), slice.lastIndexOf('? '), slice.lastIndexOf('\n'));
+      if (lastDot > limit * 0.5) end = i + lastDot + 1;
+    }
+    out.push(s.substring(i, end));
+    i = end;
+  }
+  return out;
+}
+
+document.getElementById('btnSplit').onclick = () => {
+  const text = input.value;
+  if (!text.trim()) { alert('Введите текст'); return; }
+  chunks = splitText(text, LIMIT);
+  chunkInfo.textContent = `Всего знаков: ${text.length}. Кусков: ${chunks.length} (по ≤ ${LIMIT}).`;
+
+  chunkButtons.innerHTML = '';
+  chunks.forEach((ch, i) => {
+    const b = document.createElement('button');
+    b.textContent = `Кусок ${i+1} (${ch.text.length} зн.)`;
+    b.dataset.idx = i;
+    b.onclick = () => runOne(i);
+    chunkButtons.appendChild(b);
+  });
+
+  document.getElementById('btnRunAll').disabled = false;
+  results.textContent = '';
+  highlighted.textContent = 'Нажмите «Проверить все куски» или отдельный кусок.';
+  status.textContent = '';
+};
+
+/* ---------- Запрос к LanguageTool с подробными ошибками ---------- */
+async function checkChunk(text) {
+  const body = new URLSearchParams({ text: text, language: 'ru-RU' });
+  let res;
+  try {
+    res = await fetch(API, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body
+    });
+  } catch (netErr) {
+    throw new Error('Сеть/CORS: ' + netErr.message +
+      ' — попробуйте открыть страницу через http://localhost, а не file://');
+  }
+  if (!res.ok) {
+    let detail = '';
+    try { detail = (await res.text()).substring(0, 300); } catch(_) {}
+    let hint = '';
+    if (res.status === 429) hint = ' — превышен лимит 20 запросов/мин, подождите минуту и повторите';
+    if (res.status === 413) hint = ' — кусок слишком большой, уменьшите LIMIT в коде';
+    throw new Error('HTTP ' + res.status + hint + (detail ? ' | ' + detail : ''));
+  }
+  const data = await res.json();
+  return data.matches || [];
+}
+
+/* ---------- Проверка одного куска ---------- */
+async function runOne(idx) {
+  const ch = chunks[idx];
+  if (!ch || ch.done) return;
+  status.textContent = `Проверяем кусок ${idx+1}…`;
+  try {
+    ch.matches = await checkChunk(ch.text);
+    ch.done = true;
+    ch.error = null;
+    markButton(idx, 'done');
+    renderChunkResult(idx);
+    renderHighlighted();
+    status.textContent = `Кусок ${idx+1} готов (ошибок: ${ch.matches.length}).`;
+    return true;
+  } catch (e) {
+    console.error('Ошибка на куске', idx, e);
+    ch.error = e.message;
+    ch.done = false;
+    markButton(idx, 'err');
+    renderChunkError(idx, e.message);
+    status.textContent = `Ошибка на куске ${idx+1}: ${e.message}`;
+    return false;
+  }
+}
+
+function markButton(idx, cls) {
+  const b = chunkButtons.querySelector(`button[data-idx="${idx}"]`);
+  if (!b) return;
+  b.classList.remove('done', 'err');
+  if (cls) b.classList.add(cls);
+}
+
+function renderChunkResult(idx) {
+  const ch = chunks[idx];
+  const div = document.createElement('div');
+  div.className = 'block';
+  let html = `<div class="block-title">Кусок ${idx+1} (знаки ${ch.start}–${ch.end})</div>`;
+  if (ch.matches.length === 0) {
+    html += `<div class="issue ok">✅ Ошибок не найдено</div>`;
+  } else {
+    ch.matches.forEach((m, i) => {
+      const start = Math.max(0, m.offset - 25);
+      const end = Math.min(ch.text.length, m.offset + m.length + 25);
+      const ctx = ch.text.substring(start, end).replace(/\n/g, ' ');
+      const sugg = m.replacements.slice(0, 5).map(r => r.value).join(', ');
+      html += `<div class="issue">
+        <div class="msg">${i+1}. ${escapeHtml(m.message)}</div>
+        <div class="ctx">…${escapeHtml(ctx)}…</div>
+        ${sugg ? `<div class="sugg">→ ${escapeHtml(sugg)}</div>` : ''}
+      </div>`;
+    });
+  }
+  div.innerHTML = html;
+  results.appendChild(div);
+  results.scrollTop = results.scrollHeight;
+}
+
+function renderChunkError(idx, msg) {
+  const div = document.createElement('div');
+  div.className = 'block';
+  div.innerHTML = `<div class="block-title">Кусок ${idx+1}</div>
+    <div class="issue">❌ ${escapeHtml(msg)}<pre>Проверьте вкладку Console (F12) для деталей</pre></div>`;
+  results.appendChild(div);
+  results.scrollTop = results.scrollHeight;
+}
+
+/* ---------- Подсветка в 3-й колонке ---------- */
+function renderHighlighted() {
+  let html = '';
+  chunks.forEach((ch, idx) => {
+    html += `<div class="block"><div class="block-title">Кусок ${idx+1}</div>`;
+    if (ch.error) {
+      html += `<div class="issue">❌ ${escapeHtml(ch.error)}</div>` + escapeHtml(ch.text);
+    } else if (!ch.done) {
+      html += escapeHtml(ch.text);
+    } else {
+      html += highlightChunk(ch);
+    }
+    html += `</div>`;
+  });
+  highlighted.innerHTML = html;
+}
+
+function highlightChunk(ch) {
+  const text = ch.text;
+  const matches = [...ch.matches].sort((a,b) => a.offset - b.offset);
+  let out = '';
+  let pos = 0;
+  for (const m of matches) {
+    if (m.offset < pos) continue;
+    out += escapeHtml(text.substring(pos, m.offset));
+    const orig = text.substring(m.offset, m.offset + m.length);
+    const sugg = m.replacements.length ? m.replacements[0].value : '';
+    out += `<span class="err" title="${escapeAttr(m.message)}${sugg ? ' → ' + escapeAttr(sugg) : ''}">${escapeHtml(orig)}</span>`;
+    if (sugg && sugg !== orig) {
+      out += ` <span class="fix">[→ ${escapeHtml(sugg)}]</span> `;
+    }
+    pos = m.offset + m.length;
+  }
+  out += escapeHtml(text.substring(pos));
+  return out;
+}
+
+/* ---------- Прогон всех кусков ---------- */
+document.getElementById('btnRunAll').onclick = async () => {
+  if (running) return;
+  running = true;
+  paused = false;
+  document.getElementById('btnPause').disabled = false;
+  document.getElementById('btnRunAll').disabled = true;
+
+  let okCount = 0, errCount = 0;
+
+  for (let i = 0; i < chunks.length; i++) {
+    if (paused) {
+      status.textContent = `Пауза (готово: ${okCount}, ошибок: ${errCount}). Нажмите «Проверить все куски» для продолжения.`;
+      running = false;
+      document.getElementById('btnRunAll').disabled = false;
+      return;
+    }
+    if (chunks[i].done) { okCount++; continue; }
+    const ok = await runOne(i);
+    if (ok) okCount++; else errCount++;
+    if (i < chunks.length - 1) await sleep(1200);
+  }
+
+  if (errCount === 0) {
+    status.textContent = `Все куски проверены ✅ (${okCount})`;
+  } else {
+    status.textContent = `Готово: успешно ${okCount}, с ошибкой ${errCount}. Исправьте причину и повторите.`;
+  }
+  running = false;
+  document.getElementById('btnPause').disabled = true;
+  document.getElementById('btnRunAll').disabled = false;
+};
+
+document.getElementById('btnPause').onclick = () => { paused = true; };
+
+document.getElementById('btnReset').onclick = () => {
+  chunks = [];
+  running = false; paused = false;
+  input.value = '';
+  results.textContent = '';
+  highlighted.textContent = '';
+  chunkButtons.innerHTML = '';
+  chunkInfo.textContent = '';
+  status.textContent = '';
+  document.getElementById('btnRunAll').disabled = true;
+  document.getElementById('btnPause').disabled = true;
+};
+
+function sleep(ms) { return new Promise(r => setTimeout(r, ms)); }
+function escapeHtml(s) {
+  return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
+}
+function escapeAttr(s) {
+  return escapeHtml(s).replace(/"/g,'&quot;');
+}
+</script>
+</body>
+</html>