`); printWindow.document.close(); printWindow.focus(); printWindow.print(); }/** * Downloads the table as a PNG image (numbers only). * Note: Full HTML rendering to canvas without external libraries is complex. * This function only draws the numbers and basic grid structure. */ function downloadPng() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d');const cellSize = 60; // Approximate cell size for PNG const headerBg = '#e0e0e0'; const cellBg = '#ffffff'; const textColor = '#000000'; const borderColor = '#ccc';canvas.width = (config.cols + 1) * cellSize; canvas.height = (config.rows + 1) * cellSize;ctx.fillStyle = '#f9fafb'; // Background of the canvas ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.font = 'bold 16px Inter, sans-serif'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle';for (let r = 0; r <= config.rows; r++) { for (let c = 0; c <= config.cols; c++) { const x = c * cellSize; const y = r * cellSize;// Draw cell background if (r === 0 || c === 0) { ctx.fillStyle = headerBg; // Header background if (r === 0 && c === 0) { ctx.fillStyle = '#c0c0c0'; // Top-left corner } } else { ctx.fillStyle = cellBg; // Regular cell background } ctx.fillRect(x, y, cellSize, cellSize);// Draw cell border ctx.strokeStyle = borderColor; ctx.lineWidth = 1; ctx.strokeRect(x, y, cellSize, cellSize);// Draw text ctx.fillStyle = textColor; let text = ''; if (r === 0 && c === 0) { text = ''; } else if (r === 0) { text = c.toString(); } else if (c === 0) { text = r.toString(); } else { text = (r * c).toString(); } ctx.fillText(text, x + cellSize / 2, y + cellSize / 2); } }try { const dataURL = canvas.toDataURL('image/png'); const a = document.createElement('a'); a.href = dataURL; a.download = `${config.metadata.title.replace(/\s/g, '_') || 'multiplication_table'}.png`; document.body.appendChild(a); a.click(); document.body.removeChild(a); showMessageBox('PNG Download Initiated', 'The multiplication table (numbers only) has been downloaded as a PNG image.'); } catch (e) { console.error('Error downloading PNG:', e); showMessageBox('Error', 'Could not download PNG. Your browser might restrict canvas operations or the table is too large.'); } }/** * Generates a shareable data URL / JSON blob of the current configuration. */ function generateShareableLink() { try { const jsonString = JSON.stringify(config); const encodedJson = btoa(jsonString); // Base64 encode const dataUrl = `data:application/json;base64,${encodedJson}`;// For direct sharing, a data URL can be long and not practical for URL bar. // Instead, we'll provide the JSON string itself for better readability/copying. // The dataUrl is more for programmatic use if needed.showMessageBox( 'Shareable Configuration (JSON)', 'Copy the JSON below to share your table configuration. You can paste it into a file, or send it to someone who can load it into their own generator instance.\n\n' + jsonString );// Attempt to copy to clipboard (older method for broader compatibility) const tempInput = document.createElement('textarea'); tempInput.value = jsonString; document.body.appendChild(tempInput); tempInput.select(); document.execCommand('copy'); document.body.removeChild(tempInput); // Add a small delay for user to see the message before copy confirmation setTimeout(() => { showMessageBox( 'Shareable Configuration (JSON) Copied!', 'The JSON configuration has been copied to your clipboard. You can paste it into a file, or send it to someone who can load it into their own generator instance.\n\n' + jsonString ); }, 500);} catch (e) { console.error('Error generating shareable link:', e); showMessageBox('Error', 'Could not generate shareable link. The configuration might be too large or there was an encoding error.'); } }// Attach event listeners rowsInput.addEventListener('input', updateConfigAndRender); colsInput.addEventListener('input', updateConfigAndRender); colorPreset.addEventListener('change', (e) => applyPreset(e.target.value)); headerBgStart.addEventListener('input', updateConfigAndRender); headerBgEnd.addEventListener('input', updateConfigAndRender); headerTextColor.addEventListener('input', updateConfigAndRender); oddRowBgStart.addEventListener('input', updateConfigAndRender); oddRowBgEnd.addEventListener('input', updateConfigAndRender); oddRowTextColor.addEventListener('input', updateConfigAndRender); evenRowBgStart.addEventListener('input', updateConfigAndRender); evenRowBgEnd.addEventListener('input', updateConfigAndRender); evenRowTextColor.addEventListener('input', updateConfigAndRender); titleInput.addEventListener('input', updateConfigAndRender); authorInput.addEventListener('input', updateConfigAndRender); dateInput.addEventListener('input', updateConfigAndRender); descriptionInput.addEventListener('input', updateConfigAndRender);saveConfigBtn.addEventListener('click', saveConfig); printTableBtn.addEventListener('click', printTable); downloadPngBtn.addEventListener('click', downloadPng); shareLinkBtn.addEventListener('click', generateShareableLink);// Initial load and render loadConfig(); });