From 77a75235ad859551d55ab5e81fda1111319ee89d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CNaeel=E2=80=9D?= <tazet@narod.ru>
Date: Fri, 22 May 2026 18:52:10 +0400
Subject: [PATCH] =?UTF-8?q?v66:=20=D1=81=D0=BB=D0=BE=D0=B3=D0=B8=20=D1=87?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=B7=20DOM+onmouseover/onclick=20=E2=80=94?=
 =?UTF-8?q?=20=D0=BD=D0=B0=D0=B4=D1=91=D0=B6=D0=BD=D0=B5=D0=B5=20innerHTML?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.html | 28 ++++++++++++++++++++--------
 js/compare.js   | 26 +++++++++++++++++++-------
 js/main.js      |  2 +-
 3 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index dbbcc47..d7a5b54 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -628,18 +628,30 @@ async function doCompare(blob, originalText, duration) {
     '<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
     '</div>';
 
-  // Слоги — кликабельные
+  // Слоги — кликабельные (DOM-элементы, не innerHTML)
   _currentBlob = blob;
   _currentSylBuf = null;
   const sy = syllabifyIT(originalText);
   if (sy && sy.includes('-')) {
     const syls = sy.split('-');
-    const sylHTML = '<div style="margin-top:8px;font-size:1.2em;letter-spacing:2px">' +
-      syls.map((s, i) =>
-        '<span class="syl-chip" onclick="playSyllable(' + i + ',' + syls.length + ')">' + s + '</span>'
-      ).join('<span style="color:#ccc">·</span>') +
-      '</div>';
-    document.getElementById('diff').innerHTML += sylHTML;
+    const div = document.createElement('div');
+    div.style.cssText = 'margin-top:8px;font-size:1.2em;letter-spacing:2px;user-select:none';
+    syls.forEach((s, i) => {
+      if (i > 0) {
+        const sep = document.createElement('span');
+        sep.style.cssText = 'color:#ccc;margin:0 1px';
+        sep.textContent = '·';
+        div.appendChild(sep);
+      }
+      const chip = document.createElement('span');
+      chip.textContent = s;
+      chip.style.cssText = 'cursor:pointer;padding:2px 4px;border-radius:4px;transition:background 0.15s';
+      chip.onmouseover = () => { chip.style.background = '#e0e0ff'; };
+      chip.onmouseout = () => { chip.style.background = ''; };
+      chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); };
+      div.appendChild(chip);
+    });
+    document.getElementById('diff').appendChild(div);
   }
 
   setStatus('Готово.');
@@ -651,7 +663,7 @@ async function doCompare(blob, originalText, duration) {
 <script>
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v65';
+const VERSION = 'v66';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
diff --git a/js/compare.js b/js/compare.js
index 21c8db4..7f970d2 100644
--- a/js/compare.js
+++ b/js/compare.js
@@ -99,18 +99,30 @@ async function doCompare(blob, originalText, duration) {
     '<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
     '</div>';
 
-  // Слоги — кликабельные
+  // Слоги — кликабельные (DOM-элементы, не innerHTML)
   _currentBlob = blob;
   _currentSylBuf = null;
   const sy = syllabifyIT(originalText);
   if (sy && sy.includes('-')) {
     const syls = sy.split('-');
-    const sylHTML = '<div style="margin-top:8px;font-size:1.2em;letter-spacing:2px">' +
-      syls.map((s, i) =>
-        '<span class="syl-chip" onclick="playSyllable(' + i + ',' + syls.length + ')">' + s + '</span>'
-      ).join('<span style="color:#ccc">·</span>') +
-      '</div>';
-    document.getElementById('diff').innerHTML += sylHTML;
+    const div = document.createElement('div');
+    div.style.cssText = 'margin-top:8px;font-size:1.2em;letter-spacing:2px;user-select:none';
+    syls.forEach((s, i) => {
+      if (i > 0) {
+        const sep = document.createElement('span');
+        sep.style.cssText = 'color:#ccc;margin:0 1px';
+        sep.textContent = '·';
+        div.appendChild(sep);
+      }
+      const chip = document.createElement('span');
+      chip.textContent = s;
+      chip.style.cssText = 'cursor:pointer;padding:2px 4px;border-radius:4px;transition:background 0.15s';
+      chip.onmouseover = () => { chip.style.background = '#e0e0ff'; };
+      chip.onmouseout = () => { chip.style.background = ''; };
+      chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); };
+      div.appendChild(chip);
+    });
+    document.getElementById('diff').appendChild(div);
   }
 
   setStatus('Готово.');
diff --git a/js/main.js b/js/main.js
index 840504b..2580529 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v65';
+const VERSION = 'v66';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;