diff --git a/lesson.html b/lesson.html index 493bc02..d6c4052 100644 --- a/lesson.html +++ b/lesson.html @@ -43,6 +43,9 @@ body{font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,s .back-btn{display:inline-block;margin-top:24px;padding:14px 28px;background:var(--cyan);color:var(--ink);border-radius:8px;font-weight:700;text-decoration:none} .btn-check{display:inline-block;margin-top:16px;padding:12px 28px;background:var(--ink);color:var(--white);border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:16px;transition:.15s} .btn-check:hover{opacity:.85} +.speaker{background:none;border:none;cursor:pointer;font-size:20px;padding:2px 6px;border-radius:6px;transition:.15s;vertical-align:middle;line-height:1} +.speaker:hover{background:var(--cyan-50)} +.vocab-table td{vertical-align:middle} @@ -98,16 +101,27 @@ if (!lesson) { let vocabHtml = ''; lesson.vocab.forEach(v => { - vocabHtml += `${v.cn}${v.py}${v.ru}`; + vocabHtml += `${v.cn} ${v.py}${v.ru}`; }); document.getElementById('vocab-table').innerHTML = vocabHtml; let sentHtml = ''; lesson.sentences.forEach(s => { - sentHtml += `
${s.cn}
${s.py}
${s.ru}
`; + sentHtml += `
${s.cn}
${s.py}
${s.ru}
`; }); document.getElementById('sentences-list').innerHTML = sentHtml; + document.getElementById('lesson-content').addEventListener('click', function(e) { + const btn = e.target.closest('.speaker'); + if (!btn) return; + const text = btn.dataset.speak; + const u = new SpeechSynthesisUtterance(text); + u.lang = 'zh-CN'; + u.rate = 0.85; + speechSynthesis.cancel(); + speechSynthesis.speak(u); + }); + document.getElementById('grammar-text').textContent = lesson.grammar; let quizHtml = '';