`; this.downloadText(htmlContent, 'chinese-font-design.html', 'text/html'); this.showNotification('🔗 HTML exported! / HTML已导出!'); } exportAsCSS() { const css = this.generateInlineCSS(); this.downloadText(css, 'chinese-font-styles.css', 'text/css'); this.showNotification('🎨 CSS exported! / CSS已导出!'); } exportAsSVG() { const text = document.getElementById('chineseTextInput').value; const svgContent = ` `; this.downloadText(svgContent, 'chinese-font-design.svg', 'image/svg+xml'); this.showNotification('📐 SVG exported! / SVG已导出!'); } generateInlineCSS() { return ` font-size: ${this.currentSettings.fontSize}px; font-weight: ${this.currentSettings.fontWeight}; color: ${this.currentSettings.textColor}; letter-spacing: ${this.currentSettings.letterSpacing}px; line-height: ${this.currentSettings.lineHeight}; text-transform: ${this.currentSettings.textTransform}; text-align: ${this.currentSettings.textAlign}; font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif; `; } downloadText(content, filename, mimeType) { const blob = new Blob([content], { type: mimeType }); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = filename; link.click(); URL.revokeObjectURL(link.href); } initializeControls() { // Initialize legacy controls first this.setupControls(); // Setup keyboard events and auto-generation const chineseTextInput = document.getElementById('chineseTextInput'); if (chineseTextInput) { chineseTextInput.addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); this.generateChineseFonts(); } }); // Auto-generate on input change with debouncing chineseTextInput.addEventListener('input', () => { clearTimeout(window.fontGenTimeout); const text = chineseTextInput.value.trim(); if (text.length > 0) { window.fontGenTimeout = setTimeout(() => { this.generateChineseFonts(); }, 300); } }); } // English input for translation const englishTextInput = document.getElementById('englishTextInput'); if (englishTextInput) { englishTextInput.addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); translateToChinese(); } }); englishTextInput.addEventListener('input', () => { clearTimeout(window.translateTimeout); const text = englishTextInput.value.trim(); if (text.length > 2) { window.translateTimeout = setTimeout(() => { translateToChinese(); }, 1000); } else if (text.length === 0) { const translationResult = document.getElementById('translationResult'); if (translationResult) { translationResult.innerHTML = ''; } const chineseInput = document.getElementById('chineseTextInput'); if (chineseInput && text.length === 0) { chineseInput.value = '你好世界'; this.generateChineseFonts(); } } }); } } } // Global generator instance let fontGenerator; // Legacy compatibility functions function applyCustomStyles(baseStyle) { return fontGenerator ? fontGenerator.applyCustomStyles(baseStyle) : baseStyle; } function generateChineseFonts() { if (fontGenerator) { fontGenerator.generateChineseFonts(); } } // Enhanced Translation function with API integration async function translateToChinese() { const englishInput = document.getElementById('englishTextInput'); const chineseInput = document.getElementById('chineseTextInput'); const translationResult = document.getElementById('translationResult'); if (!englishInput || !translationResult || !chineseInput) { console.error('Translation elements not found'); alert('Translation elements not found. Please refresh the page.'); return; } const englishText = englishInput.value.trim(); if (!englishText) { translationResult.innerHTML = '

Please enter some English text to translate. / 请输入一些英文文本进行翻译。

'; englishInput.focus(); return; } // Show loading state translationResult.innerHTML = ` `; try { let chineseText = await translateText(englishText, 'en', 'zh'); if (chineseText && chineseText !== englishText) { chineseInput.value = chineseText; translationResult.innerHTML = ` `; // Auto-generate fonts with the translated text setTimeout(() => { generateChineseFonts(); }, 500); } else { // Fallback to dictionary translation fallbackDictionaryTranslation(englishText, chineseInput, translationResult); } } catch (error) { console.error('Translation error:', error); // Fallback to dictionary translation fallbackDictionaryTranslation(englishText, chineseInput, translationResult); } } // API Translation function with multiple providers async function translateText(text, from, to) { // First try MyMemory API try { const myMemoryUrl = `https://api.mymemory.translated.net/get?q=${encodeURIComponent(text)}&langpair=${from}|${to}`; const myMemoryResponse = await fetch(myMemoryUrl); const myMemoryData = await myMemoryResponse.json(); if (myMemoryData.responseData && myMemoryData.responseData.translatedText) { return myMemoryData.responseData.translatedText; } } catch (error) { console.warn('MyMemory API failed:', error); } // Second try Lingva Translate API try { const lingvaUrl = `https://lingva.ml/api/v1/${from}/${to}/${encodeURIComponent(text)}`; const lingvaResponse = await fetch(lingvaUrl); const lingvaData = await lingvaResponse.json(); if (lingvaData.translation) { return lingvaData.translation; } } catch (error) { console.warn('Lingva API failed:', error); } // Third try alternative Lingva instance try { const lingvaAltUrl = `https://translate.jae.fi/api/v1/${from}/${to}/${encodeURIComponent(text)}`; const lingvaAltResponse = await fetch(lingvaAltUrl); const lingvaAltData = await lingvaAltResponse.json(); if (lingvaAltData.translation) { return lingvaAltData.translation; } } catch (error) { console.warn('Alternative Lingva API failed:', error); } // Fourth try another Lingva instance try { const lingvaAlt2Url = `https://lingva.garudalinux.org/api/v1/${from}/${to}/${encodeURIComponent(text)}`; const lingvaAlt2Response = await fetch(lingvaAlt2Url); const lingvaAlt2Data = await lingvaAlt2Response.json(); if (lingvaAlt2Data.translation) { return lingvaAlt2Data.translation; } } catch (error) { console.warn('Second alternative Lingva API failed:', error); } return null; // All APIs failed } // Fallback dictionary translation function fallbackDictionaryTranslation(englishText, chineseInput, translationResult) { const words = englishText.toLowerCase().split(' '); let chineseText = ''; words.forEach((word, index) => { const cleanWord = word.replace(/[^\w]/g, ''); const punctuation = word.replace(/\w/g, ''); const translation = englishToChineseMap[cleanWord] || cleanWord; chineseText += translation + punctuation; if (index < words.length - 1) chineseText += ' '; }); chineseInput.value = chineseText; translationResult.innerHTML = ` `; // Auto-generate fonts with the translated text setTimeout(() => { generateChineseFonts(); }, 500); } // Generate Chinese fonts function function generateChineseFonts() { const textInput = document.getElementById('chineseTextInput'); const resultsSection = document.getElementById('chineseResultsSection'); const fontResults = document.getElementById('chineseFontResults'); if (!textInput || !resultsSection || !fontResults) { console.error('Required elements not found'); alert('Error: Required elements not found. Please refresh the page.'); return; } const inputText = textInput.value.trim(); if (!inputText) { alert('请输入中文文本以生成字体！/ Please enter Chinese text to generate fonts!'); textInput.focus(); return; } console.log('Generating fonts for text:', inputText); let resultsHTML = ''; Object.entries(chineseFontStyles).forEach(([fontName, styleObj]) => { const safeText = inputText.replace(/'/g, "'").replace(/"/g, """); const customStyle = applyCustomStyles(styleObj.style); const safeCSSStyle = customStyle.replace(/'/g, "\\'").replace(/"/g, '\\"'); resultsHTML += ` `; }); fontResults.innerHTML = resultsHTML; resultsSection.style.display = 'block'; setTimeout(() => { resultsSection.scrollIntoView({ behavior: 'smooth', block: 'start' }); }, 100); } // Copy functions function copyToClipboard(text, button) { navigator.clipboard.writeText(text).then(() => { const originalHTML = button.innerHTML; button.innerHTML = '✅Copied! / 已复制!'; setTimeout(() => { button.innerHTML = originalHTML; }, 2000); }).catch(err => { console.error('Failed to copy text: ', err); // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = text; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); const originalHTML = button.innerHTML; button.innerHTML = '✅Copied! / 已复制!'; setTimeout(() => { button.innerHTML = originalHTML; }, 2000); }); } function copyCSSToClipboard(css, button) { navigator.clipboard.writeText(css).then(() => { const originalHTML = button.innerHTML; button.innerHTML = '✅Copied! / 已复制!'; setTimeout(() => { button.innerHTML = originalHTML; }, 2000); }).catch(err => { console.error('Failed to copy CSS: ', err); // Fallback for older browsers const textArea = document.createElement('textarea'); textArea.value = css; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); const originalHTML = button.innerHTML; button.innerHTML = '✅Copied! / 已复制!'; setTimeout(() => { button.innerHTML = originalHTML; }, 2000); }); } // Initialize controls function function initializeControls() { console.log('Initializing controls...'); const fontSizeSlider = document.getElementById('fontSizeSlider'); const fontSizeDisplay = document.getElementById('fontSizeDisplay'); if (fontSizeSlider && fontSizeDisplay) { fontSizeSlider.addEventListener('input', function() { fontSizeDisplay.textContent = this.value + 'px'; if (document.getElementById('chineseResultsSection').style.display !== 'none') { generateChineseFonts(); } }); console.log('Font size slider initialized'); } const shadowIntensitySlider = document.getElementById('shadowIntensitySlider'); const shadowIntensityDisplay = document.getElementById('shadowIntensityDisplay'); if (shadowIntensitySlider && shadowIntensityDisplay) { shadowIntensitySlider.addEventListener('input', function() { shadowIntensityDisplay.textContent = this.value + 'x'; if (document.getElementById('chineseResultsSection').style.display !== 'none') { generateChineseFonts(); } }); console.log('Shadow intensity slider initialized'); } ['textColorPicker', 'shadowColorPicker'].forEach(id => { const element = document.getElementById(id); if (element) { element.addEventListener('change', function() { if (document.getElementById('chineseResultsSection').style.display !== 'none') { generateChineseFonts(); } }); console.log(id + ' initialized'); } }); // Setup keyboard events and auto-generation const chineseTextInput = document.getElementById('chineseTextInput'); if (chineseTextInput) { chineseTextInput.addEventListener('keypress', function(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); generateChineseFonts(); } }); // Auto-generate on input change with debouncing for better performance chineseTextInput.addEventListener('input', function() { clearTimeout(window.fontGenTimeout); const text = this.value.trim(); if (text.length > 0) { window.fontGenTimeout = setTimeout(() => { generateChineseFonts(); }, 300); // 300ms debounce for fast generation } }); console.log('Chinese text input with auto-generation initialized'); } const englishTextInput = document.getElementById('englishTextInput'); if (englishTextInput) { englishTextInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { e.preventDefault(); translateToChinese(); } }); // Auto-translate on input change with debouncing englishTextInput.addEventListener('input', function() { clearTimeout(window.translateTimeout); const text = this.value.trim(); if (text.length > 2) { // Only translate if more than 2 characters window.translateTimeout = setTimeout(() => { translateToChinese(); }, 1000); // 1 second debounce for API calls } else if (text.length === 0) { // Clear translation result if input is empty const translationResult = document.getElementById('translationResult'); if (translationResult) { translationResult.innerHTML = ''; } // Clear Chinese input if English input is cleared const chineseInput = document.getElementById('chineseTextInput'); if (chineseInput && text.length === 0) { chineseInput.value = '你好世界'; generateChineseFonts(); } } }); console.log('English text input with auto-translation initialized'); } } // Initialize on page load document.addEventListener('DOMContentLoaded', function() { console.log('DOM loaded, initializing Enhanced Chinese Font Generator...'); // Initialize the enhanced font generator fontGenerator = new ChineseFontGenerator(); // Initialize legacy controls for compatibility initializeControls(); // Auto-generate with default text setTimeout(() => { generateChineseFonts(); }, 100); });