`;
document.body.appendChild(modal);
const schemeOptions = modal.querySelectorAll('.ai-scheme-option');
schemeOptions.forEach(option => {
option.addEventListener('click', () => {
schemeOptions.forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
selectedSchemeIndex = parseInt(option.dataset.index);
});
});
const creatorCheckbox = modal.querySelector('.ai-creator-checkbox');
const creatorInput = modal.querySelector('.ai-creator-input');
creatorCheckbox.addEventListener('change', () => {
addCreatorInfo = creatorCheckbox.checked;
creatorInput.disabled = !addCreatorInfo;
creatorInput.style.display = addCreatorInfo ? 'block' : 'none';
});
// Initialize the input field state
addCreatorInfo = creatorCheckbox.checked;
creatorInput.style.display = addCreatorInfo ? 'block' : 'none';
modal.querySelector('#ai-cancel-btn').addEventListener('click', () => {
document.body.removeChild(modal);
});
modal.querySelector('#ai-export-btn').addEventListener('click', async () => {
creatorName = creatorInput.value.trim();
document.body.removeChild(modal);
await generateAndDownloadImage(aiDiv, texts.colorSchemes[selectedSchemeIndex], texts, addCreatorInfo, creatorName);
});
}
// Generate and download image
async function generateAndDownloadImage(aiDiv, colorScheme, texts, addCreatorInfo, creatorName) {
const clonedDiv = aiDiv.cloneNode(true);
const buttonDiv = clonedDiv.querySelector('.ds-flex[style*="margin-top"]');
if (buttonDiv) buttonDiv.remove();
const container = document.createElement('div');
container.style.width = '600px';
container.style.borderRadius = '10px';
container.style.overflow = 'hidden';
container.style.boxShadow = '0 4px 8px rgba(0,0,0,0.1)';
container.style.display = 'flex';
container.style.flexDirection = 'column';
const topSection = document.createElement('div');
topSection.style.padding = '20px';
topSection.style.backgroundColor = colorScheme.top;
topSection.style.color = colorScheme.textTop;
topSection.appendChild(clonedDiv);
let footerText = texts.footer;
if (addCreatorInfo && creatorName) {
footerText += ` — By ${creatorName}`;
}
const bottomSection = document.createElement('div');
bottomSection.textContent = footerText;
bottomSection.style.padding = '10px';
bottomSection.style.textAlign = 'center';
bottomSection.style.fontSize = '14px';
bottomSection.style.fontFamily = 'Arial, sans-serif';
bottomSection.style.backgroundColor = colorScheme.bottom;
bottomSection.style.color = colorScheme.textBottom;
container.appendChild(topSection);
container.appendChild(bottomSection);
container.style.position = 'absolute';
container.style.left = '-9999px';
document.body.appendChild(container);
try {
const canvas = await html2canvas(container, {
scale: 2,
backgroundColor: null,
useCORS: true,
logging: false
});
const link = document.createElement('a');
link.download = `ai_answer_${new Date().toISOString().split('T')[0]}.png`;
link.href = canvas.toDataURL('image/png');
link.click();
} catch (error) {
console.error('Error generating image:', error);
alert(texts.error);
}
document.body.removeChild(container);
}
// Initialize
function init() {
addStyles();
createFAB();
addExportButtonsToAnswers();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();