Your Brand Claim
Main Headline
Compelling Subheadline
* Terms and conditions apply
Style Selection
Custom Colors
Content
Project exported successfully!
${bannerHtml}
`;
const styleCSS = `
/* Animation classes */
.animate-fade-in {
animation: fadeIn 1s ease-in;
}
.animate-slide-up {
animation: slideUp 1s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* Custom styles */
#banner {
background-color: ${document.getElementById('banner').style.backgroundColor || '#ffffff'};
color: ${document.getElementById('banner').style.color || '#000000'};
}
#headline {
color: ${document.getElementById('headline').style.color || '#2563eb'};
}
#cta {
background-color: ${document.getElementById('cta').style.backgroundColor || '#2563eb'};
}`;
const scriptJS = `
// Banner animation and interaction logic
document.addEventListener('DOMContentLoaded', function() {
// Initialize animations
const elements = document.querySelectorAll('.animate-fade-in, .animate-slide-up');
elements.forEach(element => {
element.style.opacity = '0';
void element.offsetWidth;
element.style.opacity = '';
});
// Add hover effect to CTA button
const cta = document.getElementById('cta');
if (cta) {
cta.addEventListener('mouseenter', () => {
cta.style.transform = 'scale(1.05)';
cta.style.transition = 'transform 0.2s ease';
});
cta.addEventListener('mouseleave', () => {
cta.style.transform = 'scale(1)';
});
}
});`;
const manifestJSON = {
"name": "Pre_tml Banner",
"version": "1.0.0",
"description": "Interactive banner created with Pre_tml",
"main": "index.html",
"scripts": {},
"author": "",
"license": "MIT",
"config": {
"dimensions": {
"width": 600,
"height": 500
},
"styles": {
"primary": document.getElementById('primaryColor').value,
"background": document.getElementById('backgroundColor').value,
"text": document.getElementById('textColor').value,
"cta": document.getElementById('ctaColor').value
}
}
};
return {
indexHtml,
styleCSS,
scriptJS,
manifestJSON
};
}
}
// Initialize the banner editor
const editor = new BannerEditor();