56 lines
2.0 KiB
JavaScript
56 lines
2.0 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const imageUpload = document.getElementById('image-upload');
|
|
const imagePreview = document.getElementById('image-preview');
|
|
const styledPreview = document.getElementById('styled-preview');
|
|
const uploadWrapper = document.querySelector('.image-upload-wrapper');
|
|
|
|
if (uploadWrapper) {
|
|
uploadWrapper.addEventListener('click', () => imageUpload.click());
|
|
}
|
|
|
|
if (imageUpload) {
|
|
imageUpload.addEventListener('change', (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
const imageUrl = e.target.result;
|
|
if(imagePreview) imagePreview.src = imageUrl;
|
|
if(styledPreview) styledPreview.src = imageUrl;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
}
|
|
|
|
const styleCards = document.querySelectorAll('.style-card');
|
|
styleCards.forEach(card => {
|
|
card.addEventListener('click', () => {
|
|
// Update active card
|
|
styleCards.forEach(c => c.classList.remove('active'));
|
|
card.classList.add('active');
|
|
|
|
// Apply style effect
|
|
const style = card.dataset.style;
|
|
if (styledPreview) {
|
|
styledPreview.className = 'styled-preview'; // Reset classes
|
|
switch (style) {
|
|
case 'pop-art':
|
|
styledPreview.classList.add('style-pop-art');
|
|
break;
|
|
case 'pixel-art':
|
|
styledPreview.classList.add('style-pixel-art');
|
|
break;
|
|
case 'sketch':
|
|
styledPreview.classList.add('style-sketch');
|
|
break;
|
|
case 'none':
|
|
default:
|
|
// No extra class needed
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|