{item.alt && {item.alt}} Handwriting {radicalPinyin(item)} {item.tone} {item.meaning} / {item.vi} {item.examples.map(word => { const wordPinyin = getMarkedPinyin(word, ''); return ( speakChinese(word)} title={wordPinyin ? `${word} ${wordPinyin}` : word} style={{ padding: '4px 8px', border: 0, borderRadius: 9, background: `${primary}10`, color: primary, fontSize: 15, fontFamily: '"PingFang SC", "Noto Sans CJK SC", var(--display-font)', display: 'inline-flex', alignItems: 'center', gap: 5, cursor: 'pointer', }}> {word} {wordPinyin && {wordPinyin}} ); })}
{item.parts.map((part, index) => ( {index === 0 && +} ))} = {resultPinyin} {item.meaning} {item.note}
Sentence {sentenceIndex + 1}/{CHINESE_SENTENCES.length} {current.topic} speakChinese(current.zh)} aria-label={`Play pronunciation for ${current.zh}`} style={{ border: 0, background: 'transparent', textAlign: 'left', width: '100%', cursor: 'pointer', color: 'var(--theme-strong)', fontSize: 'clamp(30px, 4.2vw, 54px)', lineHeight: 1.35, fontFamily: '"PingFang SC", "Noto Sans CJK SC", var(--display-font)', marginBottom: 14, }}>{current.zh} {currentPinyin} {showEnglish ? current.en : 'English hidden'}
Handwriting view speakChinese(current.zh)} aria-label={`Play pronunciation for ${current.zh}`} className="chinese-handwriting" style={{ minHeight: 174, width: '100%', border: 0, borderRadius: 20, padding: 20, display: 'grid', alignContent: 'center', textAlign: 'left', backgroundImage: 'linear-gradient(rgba(var(--theme-text-rgb),0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--theme-text-rgb),0.08) 1px, transparent 1px)', backgroundSize: '34px 34px', backgroundColor: 'rgba(var(--theme-surface-rgb),0.2)', color: primary, fontFamily: CHINESE_HANDWRITING_FONT, fontSize: 'clamp(32px, 5vw, 62px)', lineHeight: 1.45, cursor: 'pointer', }}>{current.zh}
{activeTopic.label} {activeTopic.vi} Auto saved {relatedRadicals.length > 0 && ( {relatedRadicals.map(item => ( speakChinese(item.radical)} title={`${item.radical} ${radicalPinyin(item)}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, border: `1px solid ${primary}24`, background: `${primary}0E`, color: 'var(--theme-text)', borderRadius: 999, padding: '6px 9px', cursor: 'pointer', }}> {item.radical} {radicalPinyin(item)} ))} )} updateNote(activeTopic.id, event.target.value)} placeholder={`Write notes for ${activeTopic.label}...`} style={{ width: '100%', minHeight: 260, resize: 'vertical', borderRadius: 18, padding: 16, border: '1px solid rgba(var(--theme-text-rgb),0.1)', background: 'rgba(var(--theme-surface-rgb),0.2)', color: 'var(--theme-text)', outline: 'none', lineHeight: 1.65, fontSize: 15, }} /> </article> </div> {filledNotes.length > 0 && ( <div style={{ marginTop: 18 }}> <h3 style={{ margin: '0 0 10px', color: 'var(--theme-strong)', fontSize: 18 }}>Saved notes</h3> <div className="chinese-note-summary-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, minmax(0, 1fr))', gap: 12, }}> {filledNotes.map(topic => ( <button key={topic.id} type="button" onClick={() => setActiveTopicId(topic.id)} style={{ textAlign: 'left', borderRadius: 16, border: '1px solid rgba(var(--theme-text-rgb),0.08)', background: 'rgba(var(--theme-bg-rgb),0.34)', color: 'var(--theme-text)', padding: 13, cursor: 'pointer', }}> <div style={{ color: primary, fontWeight: 900, marginBottom: 6 }}>{topic.label}</div> <div style={{ color: 'rgba(var(--theme-text-rgb),0.62)', lineHeight: 1.55, display: '-webkit-box', WebkitLineClamp: 3, WebkitBoxOrient: 'vertical', overflow: 'hidden', }}>{notes[topic.id]}</div> </button> ))} </div> </div> )} </section> ); } function ChineseSpeakText({ value, label, className = '', style = {} }) { return ( <button type="button" className={className} onClick={() => speakChinese(value)} aria-label={label || `Play pronunciation for ${value}`} style={{ display: 'inline', border: 0, padding: 0, margin: 0, background: 'transparent', color: 'inherit', font: 'inherit', fontSize: 'inherit', lineHeight: 'inherit', cursor: 'pointer', ...style, }} > {value} </button> ); } function ChineseBigChar({ value, color }) { return ( <button type="button" onClick={() => speakChinese(value)} aria-label={`Play pronunciation for ${value}`} style={{ minHeight: 62, width: '100%', borderRadius: 16, display: 'grid', placeItems: 'center', background: 'rgba(var(--theme-surface-rgb),0.24)', border: '1px solid rgba(var(--theme-text-rgb),0.08)', color, fontSize: 34, fontWeight: 900, fontFamily: '"PingFang SC", "Noto Sans CJK SC", var(--display-font)', cursor: 'pointer', }}>{value}</button> ); } function ChineseStat({ label, value }) { return ( <div style={{ padding: '12px 14px', borderRadius: 16, background: 'rgba(var(--theme-bg-rgb),0.34)', border: '1px solid rgba(var(--theme-text-rgb),0.08)', }}> <div style={{ color: 'rgba(var(--theme-text-rgb),0.48)', fontSize: 12, fontWeight: 800, textTransform: 'uppercase' }}>{label}</div> <div style={{ color: 'var(--theme-strong)', fontSize: 24, fontWeight: 900, marginTop: 3 }}>{value}</div> </div> ); } function chinesePanelStyle() { return { padding: 22, borderRadius: 22, background: 'rgba(var(--theme-surface-rgb),0.22)', border: '1px solid rgba(var(--theme-text-rgb),0.08)', boxShadow: '0 18px 50px rgba(0,0,0,0.14)', }; } function chineseButtonStyle(primary, active, disabled = false) { return { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 16px', minHeight: 42, borderRadius: 14, border: `1px solid ${active ? primary + '55' : 'rgba(var(--theme-text-rgb),0.10)'}`, background: active ? `${primary}16` : 'rgba(var(--theme-surface-rgb),0.34)', color: disabled ? 'rgba(var(--theme-text-rgb),0.34)' : active ? primary : 'var(--theme-text)', cursor: disabled ? 'not-allowed' : 'pointer', fontWeight: 800, transition: 'background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease', }; } function chineseSmallButtonStyle(primary, active, disabled = false) { return { ...chineseButtonStyle(primary, active, disabled), minHeight: 36, padding: '8px 10px', fontSize: 12, }; } window.ChineseLearningPage = ChineseLearningPage;