From 60749a969188478f74f09b6dd578bb121a6b713c 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:54:38 +0400
Subject: [PATCH] =?UTF-8?q?v67:=20=D1=81=D0=BB=D0=BE=D0=B3=D0=B8=20=D0=B2?=
 =?UTF-8?q?=20=D0=BE=D1=82=D0=B4=D0=B5=D0=BB=D1=8C=D0=BD=D1=8B=D0=B9=20#sy?=
 =?UTF-8?q?llables=20div=20=E2=80=94=20=D0=B7=D0=B0=D1=89=D0=B8=D1=82?=
 =?UTF-8?q?=D0=B0=20=D0=BE=D1=82=20=D0=BF=D0=B5=D1=80=D0=B5=D0=B7=D0=B0?=
 =?UTF-8?q?=D0=BF=D0=B8=D1=81=D0=B8=20diff?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 dist/index.html | 15 +++++++++------
 index.html      |  1 +
 js/compare.js   | 12 +++++++-----
 js/main.js      |  2 +-
 4 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index d7a5b54..c872bfc 100644
--- a/dist/index.html
+++ b/dist/index.html
@@ -49,6 +49,7 @@ button:disabled { background:#ccc; cursor:not-allowed; }
   </div>
   <div id="score"></div>
   <div id="diff"></div>
+  <div id="syllables"></div>
   <div id="translation" style="font-size:0.9em;color:#555;margin-top:8px"></div>
   <div id="recHistory" style="margin-top:16px;font-size:0.85em"></div>
 </div>
@@ -628,9 +629,11 @@ async function doCompare(blob, originalText, duration) {
     '<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
     '</div>';
 
-  // Слоги — кликабельные (DOM-элементы, не innerHTML)
+  // Слоги — в отдельный div, не в diff (diff перезаписывается)
   _currentBlob = blob;
   _currentSylBuf = null;
+  const sylDiv = document.getElementById('syllables');
+  sylDiv.innerHTML = '';
   const sy = syllabifyIT(originalText);
   if (sy && sy.includes('-')) {
     const syls = sy.split('-');
@@ -645,13 +648,13 @@ async function doCompare(blob, originalText, duration) {
       }
       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.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:4px;transition:background 0.1s';
+      chip.onmouseover = () => { chip.style.background = '#d0d0ff'; };
       chip.onmouseout = () => { chip.style.background = ''; };
-      chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); };
+      chip.onclick = () => { chip.style.background = '#a0a0ff'; setTimeout(() => { chip.style.background = '#d0d0ff'; }, 200); playSyllable(i, syls.length); };
       div.appendChild(chip);
     });
-    document.getElementById('diff').appendChild(div);
+    sylDiv.appendChild(div);
   }
 
   setStatus('Готово.');
@@ -663,7 +666,7 @@ async function doCompare(blob, originalText, duration) {
 <script>
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v66';
+const VERSION = 'v67';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;
diff --git a/index.html b/index.html
index 1751fea..7416e03 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,7 @@
   </div>
   <div id="score"></div>
   <div id="diff"></div>
+  <div id="syllables"></div>
   <div id="translation" style="font-size:0.9em;color:#555;margin-top:8px"></div>
   <div id="recHistory" style="margin-top:16px;font-size:0.85em"></div>
 </div>
diff --git a/js/compare.js b/js/compare.js
index 7f970d2..52b1ac9 100644
--- a/js/compare.js
+++ b/js/compare.js
@@ -99,9 +99,11 @@ async function doCompare(blob, originalText, duration) {
     '<span>🗣 Артикуляция: ' + phon.voiceClarity + '%</span>' +
     '</div>';
 
-  // Слоги — кликабельные (DOM-элементы, не innerHTML)
+  // Слоги — в отдельный div, не в diff (diff перезаписывается)
   _currentBlob = blob;
   _currentSylBuf = null;
+  const sylDiv = document.getElementById('syllables');
+  sylDiv.innerHTML = '';
   const sy = syllabifyIT(originalText);
   if (sy && sy.includes('-')) {
     const syls = sy.split('-');
@@ -116,13 +118,13 @@ async function doCompare(blob, originalText, duration) {
       }
       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.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:4px;transition:background 0.1s';
+      chip.onmouseover = () => { chip.style.background = '#d0d0ff'; };
       chip.onmouseout = () => { chip.style.background = ''; };
-      chip.onclick = () => { chip.style.background = '#b0b0ff'; setTimeout(() => { chip.style.background = '#e0e0ff'; }, 150); playSyllable(i, syls.length); };
+      chip.onclick = () => { chip.style.background = '#a0a0ff'; setTimeout(() => { chip.style.background = '#d0d0ff'; }, 200); playSyllable(i, syls.length); };
       div.appendChild(chip);
     });
-    document.getElementById('diff').appendChild(div);
+    sylDiv.appendChild(div);
   }
 
   setStatus('Готово.');
diff --git a/js/main.js b/js/main.js
index 2580529..f69aff2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,6 +1,6 @@
 // ---------- Глобальные переменные и инициализация ----------
 const GROQ_API_KEY = '';
-const VERSION = 'v66';
+const VERSION = 'v67';
 
 let mediaRecorder, audioChunks = [], userAudioBlob = null, ttsText = '';
 let isRecording = false, isAnalyzing = false, micAnalyser = null, micAnimId = null;