Email Template Builder
Drag components from the left panel to start building your email
Properties
Font Settings
Arial
Georgia
Trebuchet
Verdana
Component Properties
Select a component to edit its properties
`);
previewWindow.document.close();
}
function exportTemplate() {
const templateHTML = generateHTMLTemplate();
const templateCSS = generateCSSTemplate();
const fullTemplate = `
${templateName.value || 'Email Template'}
${templateHTML}
`;
// Create download link
const blob = new Blob([fullTemplate], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${templateName.value || 'email-template'}.html`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
alert('Template exported successfully!');
}
function generateHTMLTemplate() {
return emailContainer.innerHTML;
}
function generateCSSTemplate() {
const selectedFont = document.querySelector('.font-option.active').getAttribute('data-font');
return `
body {
margin: 0;
padding: 0;
background: ${bgColor.value};
font-family: ${selectedFont};
font-size: ${baseFontSize.value};
color: ${textColor.value};
}
.email-container {
max-width: ${templateWidth.value};
margin: 0 auto;
background: white;
}
/* Add more CSS rules based on your components */
`;
}
function clearTemplate() {
if (confirm('Are you sure you want to clear the template? This action cannot be undone.')) {
emailContainer.innerHTML = '';
components = [];
emptyPlaceholder.style.display = 'block';
updatePropertiesPanel();
}
}
});
