Webfont Generator Tool

`; htmlCodeArea.value = html; updateHtmlLineNumbers(); } // Update CSS line numbers function updateCssLineNumbers() { const cssCode = cssCodeArea.value; const lineCount = cssCode.split('\n').length; let lineNumbers = ''; for (let i = 1; i <= lineCount; i++) { lineNumbers += i + '\n'; } document.getElementById('css-line-numbers').innerText = lineNumbers; } // Update HTML line numbers function updateHtmlLineNumbers() { const htmlCode = htmlCodeArea.value; const lineCount = htmlCode.split('\n').length; let lineNumbers = ''; for (let i = 1; i <= lineCount; i++) { lineNumbers += i + '\n'; } document.getElementById('html-line-numbers').innerText = lineNumbers; } // Reset the tool resetButton.addEventListener('click', () => { fontFileInput.value = ''; fileNameDisplay.textContent = 'No file selected'; fontFile = null; fontData = null; if (fontUrl) { URL.revokeObjectURL(fontUrl); fontUrl = null; } originalFontName = ''; fontNameInput.value = ''; fontWeightSelect.value = 'normal'; fontStyleSelect.value = 'normal'; subsettingSelect.value = 'none'; woffCheckbox.checked = true; woff2Checkbox.checked = true; eotCheckbox.checked = false; svgCheckbox.checked = false; fontPreviewSection.style.display = 'none'; downloadSection.style.display = 'none'; progressContainer.style.display = 'none'; generatedFilesContainer.innerHTML = ''; cssCodeArea.value = ''; htmlCodeArea.value = ''; // Clean up any generated blob URLs for (const format in generatedFiles) { if (generatedFiles[format].url) { URL.revokeObjectURL(generatedFiles[format].url); } } generatedFiles = {}; showStatus('Tool reset successfully.', 'valid'); updateCssLineNumbers(); updateHtmlLineNumbers(); }); // Copy CSS code to clipboard copyCssButton.addEventListener('click', () => { cssCodeArea.select(); document.execCommand('copy'); // Show temporary success message const originalText = copyCssButton.textContent; copyCssButton.textContent = 'Copied!'; setTimeout(() => { copyCssButton.textContent = originalText; }, 1500); }); // Copy HTML code to clipboard copyHtmlButton.addEventListener('click', () => { htmlCodeArea.select(); document.execCommand('copy'); // Show temporary success message const originalText = copyHtmlButton.textContent; copyHtmlButton.textContent = 'Copied!'; setTimeout(() => { copyHtmlButton.textContent = originalText; }, 1500); }); // Download all files as ZIP (simulated) downloadAllButton.addEventListener('click', () => { showStatus('Preparing ZIP file with all generated fonts...', 'valid'); // Simulate ZIP creation delay setTimeout(() => { // In a real app, we would create an actual ZIP file here // Generate ZIP download name const fontName = fontNameInput.value.trim() || originalFontName; const subsetting = subsettingSelect.value; const subsetSuffix = subsetting !== 'none' ? `-${subsetting}` : ''; const zipName = `${fontName}${subsetSuffix}-webfonts.zip`; // Create a simple text file as placeholder const zipContent = `This is a simulated ZIP file containing webfonts for ${fontName}.\n\n` + `Generated formats:\n` + Object.keys(generatedFiles).map(format => `- ${generatedFiles[format].name} (${generatedFiles[format].size} KB)` ).join('\n'); const blob = new Blob([zipContent], {type: 'text/plain'}); const url = URL.createObjectURL(blob); // Create and trigger download const a = document.createElement('a'); a.href = url; a.download = zipName; document.body.appendChild(a); a.click(); document.body.removeChild(a); // Cleanup blob URL after download setTimeout(() => URL.revokeObjectURL(url), 100); showStatus('All files downloaded as ZIP!', 'valid'); }, 1500); }); // Show status message function showStatus(message, status) { statusMessage.textContent = message; statusMessage.className = `tool-status tool-${status}`; statusMessage.style.display = 'block'; // Auto-hide status after 7 seconds setTimeout(() => { statusMessage.style.display = 'none'; }, 7000); } // Initialize line numbers updateCssLineNumbers(); updateHtmlLineNumbers(); });