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) { 'πŸ—£ Артикуляция: ' + phon.voiceClarity + '%' + ''; - // Π‘Π»ΠΎΠ³ΠΈ β€” ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ + // Π‘Π»ΠΎΠ³ΠΈ β€” ΠΊΠ»ΠΈΠΊΠ°Π±Π΅Π»ΡŒΠ½Ρ‹Π΅ (DOM-элСмСнты, Π½Π΅ innerHTML) _currentBlob = blob; _currentSylBuf = null; const sy = syllabifyIT(originalText); if (sy && sy.includes('-')) { const syls = sy.split('-'); - const sylHTML = '
' + - syls.map((s, i) => - '' + s + '' - ).join('Β·') + - '
'; - 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) {